在html如何快速創建表格?這一章學習表格，包括表格的核心結構、表格标題、表頭和表格的完整語義化結構、合并行和全并列，今天小編就來說說關于在html如何快速創建表格?下面更多詳細答案一起來看看吧!
這一章學習表格，包括表格的核心結構、表格标題、表頭和表格的完整語義化結構、合并行和全并列。
學無止境，樂在其中。關注我，一起進步。
1、表格的核心結構
HTML中的表格核心結構包括：表格table、行tr（table row）、單元格td（table data cell），其語法為：
<body>
<table>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
...
</table>
</body>
表格核心結構的代碼和顯示效果如圖所示：
圖中黃色方框中的代碼是給表格加上邊框，寬度1px，實線solid，藍色blue。
<style type="text/css">
table,tr,td {border: 1px solid blue;}
</style>
2、表格标題caption
表格标題是表格最前面的内容，獨立于表格的行，放在tr标簽的前面，語法如下：
<table>
<caption>表格标題演示</caption>
<tr>
<td>第1行單元格1</td>
<td>第1行單元格2</td>
</tr>
...
</table>
表格标題的代碼和顯示效果如下圖，一般不加框好看點：
3、表頭單元格th
表頭單元格th（table head cell）也是單元格，放在表格标題下面，普通單元格上面，語法如下：
<table>
<caption>表格标題演示</caption>
<tr>
<th>表頭單元格1</th>
<th>表頭行單元格2</th>
</tr>
<tr>
<td>第1行單元格3</td>
<td>第1行單元格4</td>
</tr>
...
</table>
表頭th單元格與普通單元格有什麼不同？
（1）在顯示的時候，th單元格裡的内容會自動加粗和居中，普通單元格則不會。
（2）語義化更好，提高可讀性，便于控制外觀。
下面是表頭單元格的完整代碼，效果如圖，大家可以自己試一下。
<!DOCTYPE html>
<html>
<head>
<!--定義頁面編碼方式-->
<meta charset="utf-8"/>
<title>定義列表演示</title>
<style type="text/css">
table,tr,td,th {border: 1px solid blue;}
</style>
</head>
<body>
<table>
<caption>身體狀況統計</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>身高/cm</th>
<th>體重/kg</th>
</tr>
<tr>
<td>小明</td>
<td>23</td>
<td>175</td>
<td>65</td>
</tr>
<tr>
<td>小紅</td>
<td>25</td>
<td>165</td>
<td>59</td>
</tr>
</table>
</body>
</html>
4、完整的語義化表格
一個完整的語義化表格包括表格标題caption，表頭thead，表身tbody，表腳tfoot四個部分，每個部分包括各自的行tr和單元格th、td。其中完整語法如下：
<table>
<caption>表格标題</caption>
<thead>
<tr>
<th>表頭單元格1</th>
<th>表頭單元格2</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身單元格1</td>
<td>表身單元格2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表腳單元格1</td>
<td>表腳單元格2</td>
</tr>
</tfoot>
</table>
顯示效果如下：
表腳通常用于統計數據的合計等，所以有的時候我們并不用完整的表格。下面一個完整表格的代碼和顯示效果。
<!DOCTYPE html>
<html>
<head>
<!--定義頁面編碼方式-->
<meta charset="utf-8"/>
<title>定義列表演示</title>
<style type="text/css">
table,tr,td,th {border: 1px solid blue;}
</style>
</head>
<body>
<table>
<caption>理科綜合成績統計表</caption>
<thead>
<tr>
<th>姓名</th>
<th>物理</th>
<th>化學</th>
<th>生物</th>
</tr>
</thead>
<tbody>
<tr>
<td>李白</td>
<td>105</td>
<td>90</td>
<td>80</td>
</tr>
<tr>
<td>杜甫</td>
<td>95</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>白居易</td>
<td>100</td>
<td>96</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>100</td>
<td>92</td>
<td>80</td>
</tr>
</tfoot>
</table>
</body>
</html>
5、合并行rowspan
合并行就是把同一列中從本單元格起，向下的若幹個單元合并成一個單元格，其語法為：
<td rowspan=”合并的單元格數”>合并後單元格的内容</td>
row是行，span是橫跨，跨越的意思。現在大家看一例子。在這個例子中，第1列的第1個和第2個單元格合并了，第1列的第3~5個單元格也合并了。代碼和顯示效果如下：
<table>
<caption>購物清單</caption>
<tr>
<td rowspan="2">點心</td>
<td>餅幹</td>
</tr>
<tr>
<td>蛋糕</td>
</tr>
<tr>
<td rowspan="3">水果</td>
<td>蘋果</td>
</tr>
<tr>
<td>香蕉</td>
</tr>
<tr>
<td>火龍果</td>
</tr>
</table>
6、合并列colspan
col是column（列）的縮寫，合并列就是把同一行的若幹個連續的單元格合并成一個。其語法為：
<td colspan=”合并的單元格數”>合并後的單元格内容</td>
我是“不惑編程”，關注我，學習更多！
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
