整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一個表格中分為 行 和 列 ，有時候你經常在網頁中看到類似這樣的表格，有時候是合并了列，有時候是合并了行。那么這個是怎么做的？也是通過下面的方法實現的。
向單元格添加屬性即可實現，合并 列 和 行的屬性不一樣
1、合并列的屬性：clospan="2" //要合并幾列數字就是幾
2、合并行的屬性：rowspan="2" //同理，要合并幾行數字就是幾
3、合并后的單元格（行或列）必然會自動多出來一個，需要手動刪掉。
4、重點：合并單元格只和 td 標簽有關系：
（1）合并列：是左右合并，在左側的 td 標簽中添加 colspan="2" 要合并的 td 的數量。
（2）合并行：是上下合并，在上面的 td 標簽中添加 rowspan="2" 要合并的td的數量。
（3）合并完后刪除多余的 td 標簽。
1、合并 列 的用法：
（1）首先確定你要合并的單元格在第幾行第幾列，然后找到它，從他的td標簽中添加屬性。
例如要合并第4行的，第4和第5列：
<tr>
<td>第三節</td>
<td>html</td>
<td>css</td>
<td colspan="2">php</td> <!-- 合并 列 的用法-->
<td>php</td>
</tr>2、合并 行 的用法：
例如下面：合并第3行和第4行的第1列。
完整代碼：↓
天在將HTML標簽之前，小編先帶大家了解一下什么是塊級元素和行內元素。
大多數 HTML 元素被定義為塊級元素或內聯元素。
HTML塊元素（block element）
塊級元素默認占一行，一行內添加一個塊元素后一般無法添加其他的元素（后續CSS中會講塊級元素和行內元素的轉換）。塊級元素一般可以嵌套塊級元素或行內元素。塊級元素寬高，行高以及外邊距和內邊距都是可控的。
之前的文章講到的h1~h6,p,ul,ol,table,hr,dl 都是塊級元素。
我們用<p>標簽舉個栗子讓大家看的更明白一點：
塊級元素
在瀏覽器中顯示：
塊級元素自占一行
上面第二個元素并沒有和第一個元素在同一行顯示，而是自動換行，每個塊級元素都自占一行。
HTML行內元素（inline element）
行內元素也叫內聯元素或者內嵌元素。行內元素和其他元素都在一行上，高度、行高、內邊距和外邊距都不可改變。寬度是它文字或者圖片的寬度，也是不可改變的。行內元素只能容納文本或者其他行內元素。
之前文章中講到的 a,img,br是行內元素。
同樣我們用<a>標簽舉個栗子：
內聯元素
在瀏覽器中顯示：
行內元素與其他元素都在一行上
上面三個行內元素都在同一行上顯示，并沒有自占一行。當一行內聯元素內容超過瀏覽器寬度才會自動換行。
行內元素寬度隨內容變化而變化
好了，帶大家了解了塊級元素和行內元素。下面接著為大家講解HTML標簽。
HTML <div>標簽
<div> 元素是塊級元素，<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。
<div> 元素的另一個常見的用途是文檔布局。
實例：
div是容器，把文檔分成獨立的一部分
實際上，div就是一個容器，它把文檔分成獨立的、不同的部分。div還有一個最長用的用途是文檔布局。
比如一個網頁有頭部、內容和尾部三個結構，那么在布局時就可以用3個div標簽三個部分獨立出來。
文檔布局
當然，在每個div里面也可以放置div來區分每個獨立部分的內容。（如果用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。）
HTML <span> 標簽
<span> 標簽是行內元素，用來組合文檔中的行內元素。
在瀏覽器中顯示：
通過使用span標簽，可以更好的管理行內元素。如果不加樣式的話，span元素中的文本與其他文本不會有任何區別。如果你還是不懂它的用途，那么小編加一點css給大家講解一下：
添加style屬性設置字體顏色
瀏覽器中顯示：
span元素里面文本顏色顯示為紅色
上面p元素里面有一段文本，為了區分結構，我們把span標簽里面的文本顏色設置為紅色。（后續講CSS可以應用id或者class屬性來控制樣式）
今天講的內容可能對于剛接觸HTML的童靴們會有些迷惑，不懂得地方也歡迎大家留言問我。
你必須非常努力，才能看起來毫不費力！
記得關注小白前端，才能收到文章推送哦~
己美化吧
<section>
<table id="addrow" border=1>
<tr>
<td></td>
<td>序號</td>
<td></td>
</tr>
<tr>
<td></td>
<td>1</td>
<td></td>
</tr>
</table>
<button onclick='AddRow();'>添加行</button>
</section>
<script>
//添加行
function AddRow() {
// 被點擊的目標標簽tagName 如INPUT DIV
var clicktagname = $(event.target).get(0).tagName;
//獲取點擊對象
var clickedNode = event.target;
var $table = $(clickedNode).closest("section").find("table:first");
var tableId = $table.attr("id");
//var $table=$("#"+tableId);
var numRows = $table.find("tr").length; //行數
if(numRows > 20) { //數據行最多10行 共11行
mscAlert("別再加了！");
return false;
} else {
numRows = $table.find("tr").length;
$("#" + tableId + " tr:last").clone(false).insertBefore("#" + tableId + " tr:eq(1)");
}
for(var i = 1; i < numRows + 1; i++) { //第二列序號
$('#' + tableId + ' tr:eq(' + i + ') td:eq(1)').text(i);
}
}
</script>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
