定義和用法
<table> 标簽定義 HTML 表格。
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
更複雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
建立一個兩行三列的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table>
<tr>
<td>2017</td>
<td>2018</td>
<td>2019</td>
</tr>
<tr>
<td>6000</td>
<td>8000</td>
<td>10000</td>
</tr>
</table>
</body>
</html> View Code
如果要給表格加上邊框，就要在table标簽裡加上border屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1">
<tr>
<td>2017</td>
<td>2018</td>
<td>2019</td>
</tr>
<tr>
<td>6000</td>
<td>8000</td>
<td>10000</td>
</tr>
</table>
</body>
</html> View Code
這樣就給表格加上了1像素的邊框
帶表頭的表格
<th>…</th> <!– 表格頭，内容居中、加粗顯示--> 帶标題的表格，要放在table标簽的下面，
一個表格隻能定義一個标題
<table>
<caption>…</caption> <!– 表格标題，居中顯示-->
</table> 帶結構的表格
不影響布局，但是當表格比較多的時候，不用等到所有表格加載完才顯示，會分塊顯示
表格劃分三部分：表頭、主體、腳注
• thead：表格的頭 （放标題之類内容）
• tbody：表格的主體 （放資料本體）
• tfoot：表格的腳 （放表格的腳注）
<table>
<caption>…</caption>
<thead>
<tr>
<th>表頭</th>
</tr>
</thead>
<tbody>
<tr>
<td>主體</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>腳注</td>
</tr>
</tfoot>
</table> 表格屬性
table的屬性
table标簽除了具有html元素中通用的屬性外，還含有自己的屬性，常用屬性如下：
bgcolor：規定表格邊框的寬度。
cellpadding：規定單元邊沿與其内容之間的空白，一個單元格的大小
cellspacing：規定單元格之間的空白。
frame：規定外側邊框的哪個部分是可見的。
rules：規定内側邊框的哪個部分是可見的。
summary：規定表格的摘要。
width：規定表格的寬度。 frame屬性 void 不顯示外側邊框。
above 顯示上部的外側邊框。
below 顯示下部的外側邊框。
hsides 顯示上部和下部的外側邊框。
vsides 顯示左邊和右邊的外側邊框。
lhs 顯示左邊的外側邊框。
rhs 顯示右邊的外側邊框。
box 在所有四個邊上顯示外側邊框。
border 在所有四個邊上顯示外側邊框 rules屬性
none 沒有線條。
groups 位于行組和列組之間的線條。
rows 位于行之間的線條。
cols 位于列之間的線條。
all 位于行和列之間的線條。 tr标簽屬性
td和th标簽屬性
<thead>、<tbody>和<tfoot>标簽屬性
跨列屬性colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1">
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>555</td>
<td>666</td>
</tr>
</table>
</body>
</html> View Code
合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">111</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>555</td>
<td>666</td>
</tr>
</table>
</body>
</html> 跨行屬性rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>555</td>
<td>666</td>
</tr>
</table>
</body>
</html> 表格嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="1">
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>
<table border="1">
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
</table>
</td>
<td>666</td>
</tr>
</table>
</body>
</html> 小練習
完成以下表格樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<table border="5" width="500px" align="center" cellspacing="0" cellpadding="10">
<caption>網際網路工資</caption>
<thead align="center">
<tr bgcolor="green">
<th rowspan="2">城市</th>
<th colspan="2">2017年</th>
<th rowspan="2">2018年</th>
<th rowspan="2">2019年</th>
</tr>
<tr bgcolor="green">
<td>上半年</td>
<td>下半年</td>
</tr>
</thead>
<tbody align="center">
<tr>
<td bgcolor="#deb887">甘肅</td>
<td>5500</td>
<td>4550</td>
<td>9900</td>
<td>7200</td>
</tr>
<tr>
<td bgcolor="#deb887">浙江</td>
<td>9000</td>
<td>6666</td>
<td>1200</td>
<td>3000</td>
</tr>
</tbody>
<tfoot align="center">
<tr >
<td bgcolor="#deb887">上海</td>
<td>1000</td>
<td>5555</td>
<td>4000</td>
<td>8000</td>
</tr>
</tfoot>
</table>
</body>
</html> View Code