HTML表格巢狀、合併表格
阿新 • • 發佈：2018-12-26
一、表格元素< table>
table常用屬性
border：邊框畫素
width，height：表格寬度/高度
bordercolor：表格邊框顏色
bgcolor：表格背景顏色
二、tr，th，td元素
th和td元素是在tr中的
一組tr代表一行
一組th或td代表一列
<table border="1" width="800" bordercolor="#777777" bgcolor="#5f9ea0">
<tr>
<th>asa</th> 效果
從以上效果和程式碼可以看出，th表示表頭，會自動居中，td表示普通內容
三、合併單元格(重點)
合併單元格在表格中是最重要的，需要兩個屬性colspan和rowspan
1.colspan：合併的是該行的單元格，就是同一行不同列的單元格合併，比如colspan=”2”則需要刪除該行一個單元格，否則超出格子
2.rowspan：合併的是該列的單元格，同列不同行，與colspan一樣若要rowspan=”2”將刪除下一列的一個td或th標籤，（不管刪除下一列的哪一個，這一行被合併，其他元素都是在後面的，除了該列以前元素）
<table border="1" width="70" bordercolor="#777777" bgcolor="#5f9ea0">
<tr>
<th>asa</th><th>asas</th><th>as</th>
</tr>
<tr>
<td rowspan="2">hahha</td><td>hahha</td><td>hahha</td>
</tr> 效果
四、表格巢狀
- 在某個th或td中加table
- 最好在巢狀表格的地方用合併單元格（就是把巢狀的表格放入合併的單元格）
<table border="1" width="800" bordercolor="blue">
<caption><h1>阿水的阿里blog</h1></caption>
<tr>
<th>name</th> <th>password</th> <th>goal</th>
</tr>
<tr>
<th>xlj</th><th colspan="2">001</th>
</tr>
<tr>
<th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue">
<caption><h1>阿水的阿里blog</h1></caption>
<tr>
<th>name</th><th>password</th><th>goal</th>
</tr>
<tr>
<th>xlj</th><th colspan="2">001</th>
</tr>
<tr>
<th>asa</th><th rowspan="2">002</th><th>88</th>
</tr>
<tr>
<th>add</th><th>76</th>
</tr>
</table></th><th>88</th>
</tr>
<tr>
<th>add</th><th>76</th>
</tr>
</table>五、表格練習程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
</head>
<body>
<table border="1" width="800" bordercolor="blue">
<caption><h1>阿水的阿里blog</h1></caption>
<tr>
<th>name</th> <th>password</th> <th>goal</th>
</tr>
<tr>
<th>xlj</th><th colspan="2">001</th>
</tr>
<tr>
<th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue">
<caption><h1>阿水的阿里blog</h1></caption>
<tr>
<th>name</th><th>password</th><th>goal</th>
</tr>
<tr>
<th>xlj</th><th colspan="2">001</th>
</tr>
<tr>
<th>asa</th><th rowspan="2">002</th><th>88</th>
</tr>
<tr>
<th>add</th><th>76</th>
</tr>
</table></th><th>88</th>
</tr>
<tr>
<th>add</th><th>76</th>
</tr>
</table>
</body>
</html>效果
以上的表格標題在table中寫：
< caption>< h1>阿水的阿里blog< /h1>< /caption>
caption是表格標題居中，並且一直跟著表格，不管表格怎麼移動