1、举例
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
举例1（表格）：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 ????11 ????????<h4>one column</h4>12 ????????<table border="1">13 ????????????<tr>14 ????????????????<td>100</td>15 ????????????</tr>16 ????????</table>17 ????????18 ????????<h4>one row, three column</h4>19 ????????<table border="1">20 ????????????<tr>21 ????????????????<td>100</td>22 ????????????????<td>200</td>23 ????????????????<td>300</td>24 ????????????</tr>25 ????????</table>26 ????????27 ????????<h4>two row, three column</h4>28 ????????<table border="1">29 ????????????<tr>30 ????????????????<td>100</td>31 ????????????????<td>200</td>32 ????????????????<td>300</td>33 ????????????</tr>34 ????????????<tr>35 ????????????????<td>400</td>36 ????????????????<td>500</td>37 ????????????????<td>600</td>38 ????????????</tr>39 ????????</table>40 ????41 ????</body>42 </html>
输出结果：
举例2（表格边框）：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<h4>two row, two column, with no border</h4>12 ????????<table>13 ????????????<tr>14 ????????????????<td>First</td>15 ????????????????<td>row1</td>16 ????????????</tr>17 ????????????<tr>18 ????????????????<td>Second</td>19 ????????????????<td>row2</td>20 ????????????</tr>21 ????????</table>22 ????????23 ????????<h4>two row, two column, with a normal border</h4>24 ????????<table border="1">25 ????????????<tr>26 ????????????????<td>First</td>27 ????????????????<td>row1</td>28 ????????????</tr>29 ????????????<tr>30 ????????????????<td>Second</td>31 ????????????????<td>row2</td>32 ????????????</tr>33 ????????</table>34 ????????35 ????????<h4>two row, two column, with rough border</h4>36 ????????<table border="8">37 ????????????<tr>38 ????????????????<td>First</td>39 ????????????????<td>row1</td>40 ????????????</tr>41 ????????????<tr>42 ????????????????<td>Second</td>43 ????????????????<td>row2</td>44 ????????????</tr>45 ????????</table>46 ????????47 ????????<h4>two row, two column, with thick border</h4>48 ????????<table border="16">49 ????????????<tr>50 ????????????????<td>First</td>51 ????????????????<td>row1</td>52 ????????????</tr>53 ????????????<tr>54 ????????????????<td>Second</td>55 ????????????????<td>row2</td>56 ????????????</tr>57 ????????</table>58 ????59 ????</body>60 </html>
输出结果：
2、表格
2.1 表格属性
表格属性参考：http://www.w3school.com.cn/tags/tag_table.asp
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align |
| 不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 |
| bgcolor |
| 不赞成使用。请使用样式代替。 规定表格的背景颜色。 |
| border | pixels | 规定表格边框的宽度。 |
| cellpadding |
| 规定单元边沿与其内容之间的空白。 |
| cellspacing |
| 规定单元格之间的空白。 |
| frame |
| 规定外侧边框的哪个部分是可见的。 |
| rules |
| 规定内侧边框的哪个部分是可见的。 |
| summary | text | 规定表格的摘要。 |
| width |
| 规定表格的宽度。 |
全局属性
<table> 标签支持HTML 中的全局属性。
事件属性
<table> 标签支持HTML 中的事件属性。
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
2.3表格的表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<h4>two row, two column, with a normal border</h4>12 ????????<table border="1">13 ????????????<tr>14 ????????????????<th>Heading</th>15 ????????????????<th>Another Heading</th>16 ????????????</tr> ???????17 ????????????<tr>18 ????????????????<td>First</td>19 ????????????????<td>row1</td>20 ????????????</tr>21 ????????????<tr>22 ????????????????<td>Second</td>23 ????????????????<td>row2</td>24 ????????????</tr>25 ????????</table>26 ????27 ????</body>28 </html>
输出结果：
2.4表格中的空单元格
举例1（带表头和表边框）：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<h4>two row, two column, with a normal border</h4>12 ????????<table border="1">13 ????????????<tr>14 ????????????????<th>Heading</th>15 ????????????????<th>Another Heading</th>16 ????????????</tr> ???????17 ????????????<tr>18 ????????????????<td></td>19 ????????????????<td>row1</td>20 ????????????</tr>21 ????????????<tr>22 ????????????????<td>Second</td>23 ????????????????<td>row2</td>24 ????????????</tr>25 ????????</table>26 ????27 ????</body>28 </html>
输出结果：
举例2（无表头，不带表边框）：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<h4>two row, two column, with a normal border</h4>12 ????????<table>13 ????????????<tr>14 ????????????????<td></td>15 ????????????????<td>row1</td>16 ????????????</tr>17 ????????????<tr>18 ????????????????<td>Second</td>19 ????????????????<td>row2</td>20 ????????????</tr>21 ????????</table>22 ????23 ????</body>24 </html>
输出结果：
2.5带标题的表格
举例（带边框）：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<h4>two row, two column, with a normal border</h4>12 ????????<table border="1">13 ????????<caption>My table title</caption>14 ????????????<tr>15 ????????????????<td>First</td>16 ????????????????<td>row1</td>17 ????????????</tr>18 ????????????<tr>19 ????????????????<td>Second</td>20 ????????????????<td>row2</td>21 ????????????</tr>22 ????????</table>23 ????24 ????</body>25 </html>
输出结果：
2.6跨行或者跨列的表格
举例（带边框）：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<h4>Table test1</h4>12 ????????<table border="1">13 ????????????<tr>14 ????????????????<th>Name</th>15 ????????????????<th colspan="2">Tel</th>16 ????????????????<th colspan="3">Code</th>17 ????????????</tr>18 ????????????<tr>19 ????????????????<td>name</td>20 ????????????????<td>tel1</td>21 ????????????????<td>tel2</td>22 ????????????????<td>code1</td>23 ????????????????<td>code2</td>24 ????????????????<td>code3</td>25 ????????????</tr>26 ????????</table>27 28 ????????<h4>Table test1</h4>29 ????????<table border="1">30 ????????????<tr>31 ????????????????<th>Name</th>32 ????????????????<td>name</td>33 ????????????</tr>34 ????????????<tr>35 ????????????????<th rowspan="2">Tel</th>36 ????????????????<td>tel1</td>37 ????????????</tr>38 ????????????<tr>39 ????????????????<td>tel2</td>40 ????????????</tr>41 ????????????<tr>42 ????????????????<th rowspan="3">Code</th>43 ????????????????<td>code1</td>44 ????????????</tr>45 ????????????<tr>46 ????????????????<td>code2</td>47 ????????????</tr>48 ????????????<tr>49 ????????????????<td>code3</td>50 ????????????</tr> ???????????????51 ????????</table>52 ????????53 ????</body>54 </html>
输出结果：
2.7单元格的间距
举例（带边框）：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<h4>Table test1</h4>12 ????????<table border="1">13 ????????????<tr>14 ????????????????<td>Row1</td>15 ????????????????<td>N1.1</td>16 ????????????????<td>N1.2</td>17 ????????????</tr>18 ????????????<tr>19 ????????????????<td>Row2</td>20 ????????????????<td>N2.1</td>21 ????????????????<td>N2.2</td>22 ????????????</tr>23 ????????</table>24 25 ????????<h4>Table test2 with cellspacing</h4>26 ????????<table border="1" cellspacing = "8">27 ????????????<tr>28 ????????????????<td>Row1</td>29 ????????????????<td>N1.1</td>30 ????????????????<td>N1.2</td>31 ????????????</tr>32 ????????????<tr>33 ????????????????<td>Row2</td>34 ????????????????<td>N2.1</td>35 ????????????????<td>N2.2</td>36 ????????????</tr>37 ????????</table>38 ????</body>39 </html>
输出结果：
2.8单元格的边距
举例：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<h4>Table test1 without cellpadding</h4>12 ????????<table border="1">13 ????????????<tr>14 ????????????????<td>Row1</td>15 ????????????????<td>N1.1</td>16 ????????????????<td>N1.2</td>17 ????????????</tr>18 ????????????<tr>19 ????????????????<td>Row2</td>20 ????????????????<td>N2.1</td>21 ????????????????<td>N2.2</td>22 ????????????</tr>23 ????????</table>24 25 ????????<h4>Table test2 with cellpadding</h4>26 ????????<table border="1" cellpadding = "8">27 ????????????<tr>28 ????????????????<td>Row1</td>29 ????????????????<td>N1.1</td>30 ????????????????<td>N1.2</td>31 ????????????</tr>32 ????????????<tr>33 ????????????????<td>Row2</td>34 ????????????????<td>N2.1</td>35 ????????????????<td>N2.2</td>36 ????????????</tr>37 ????????</table>38 ????</body>39 </html>
输出结果：
2.9 向表格添加背景颜色或者背景图像
举例：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<h4>Table test1 with bgcolor 1</h4>12 ????????<table border="1" bgcolor="red">13 ????????????<tr>14 ????????????????<td>Row1</td>15 ????????????????<td>N1.1</td>16 ????????????????<td>N1.2</td>17 ????????????</tr>18 ????????????<tr>19 ????????????????<td>Row2</td>20 ????????????????<td>N2.1</td>21 ????????????????<td>N2.2</td>22 ????????????</tr>23 ????????</table>24 25 ????????<h4>Table test2 with bgcolor 2</h4>26 ????????<table border="1" bgcolor="baidu.jpg">27 ????????????<tr>28 ????????????????<td>Row1</td>29 ????????????????<td>N1.1</td>30 ????????????????<td>N1.2</td>31 ????????????</tr>32 ????????????<tr>33 ????????????????<td>Row2</td>34 ????????????????<td>N2.1</td>35 ????????????????<td>N2.2</td>36 ????????????</tr>37 ????????</table>38 ????</body>39 </html>
输出结果：
2.10 向表格单元添加背景颜色或者背景图像
举例：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<h4>Table test1 with bgcolor 1</h4>12 ????????<table border="1">13 ????????????<tr>14 ????????????????<td bgcolor="red">Row1</td>15 ????????????????<td>N1.1</td>16 ????????????????<td>N1.2</td>17 ????????????</tr>18 ????????????<tr>19 ????????????????<td bgcolor="baidu.jpg">Row2</td>20 ????????????????<td>N2.1</td>21 ????????????????<td>N2.2</td>22 ????????????</tr>23 ????????</table>24 25 ????</body>26 </html>
输出结果：
2.11 表格中排列内容（对齐方式）
举例：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<table width="400" border="1">12 ????????????<tr>13 ????????????????<th >Consumer projects</th>14 ????????????????<th align="right">January</th>15 ????????????????<th align="right">February</th>16 ????????????</tr> ???????17 ????????????<tr>18 ????????????????<td >Clothes</td>19 ????????????????<td align="right">$241.10</td>20 ????????????????<td align="right">$50.20</td>21 ????????????</tr>22 ????????????<tr>23 ????????????????<td >Cosmetics</td>24 ????????????????<td align="right">$30.00</td>25 ????????????????<td align="right">$44.45</td>26 ????????????</tr>27 ????????????<tr>28 ????????????????<td >Foods</td>29 ????????????????<td align="right">$730.40</td>30 ????????????????<td align="right">$650.00</td>31 ????????????</tr>32 ????????????<tr>33 ????????????????<th >Totals</th>34 ????????????????<th align="right">$1001.50</th>35 ????????????????<th align="right">$744.65</th>36 ????????????</tr>37 ????????</table>38 39 ????</body>40 </html>
输出结果：
2.12 表格frame属性（配置边框是否可见）
举例：
1 <!DOCTYPE html> 2 <html> 3 ????<head> 4 ????????<meta charset="utf-8"> 5 ????????<title>My test page</title> 6 ?7 ????</head> 8 ?????9 ????<body> 10 11 ????????<p style="color: red"><strong>Table with frame="box":</strong></p>12 ????????<table frame="box">13 ????????????<tr>14 ????????????????<th>Month</th>15 ????????????????<th>Savings</th>16 ????????????</tr>17 ????????????<tr>18 ????????????????<td>January</td>19 ????????????????<td>$100</td>20 ????????????</tr>21 ????????</table>22 23 ????????<p style="color: red"><strong>Table with frame="above":</strong></p>24 ????????<table frame="above">25 ????????????<tr>26 ????????????????<th>Month</th>27 ????????????????<th>Savings</th>28 ????????????</tr>29 ????????????<tr>30 ????????????????<td>January</td>31 ????????????????<td>$100</td>32 ????????????</tr>33 ????????</table>34 35 ????????<p style="color: red"><strong>Table with frame="below":</strong></p>36 ????????<table frame="below">37 ????????????<tr>38 ????????????????<th>Month</th>39 ????????????????<th>Savings</th>40 ????????????</tr>41 ????????????<tr>42 ????????????????<td>January</td>43 ????????????????<td>$100</td>44 ????????????</tr>45 ????????</table>46 47 ????????<p style="color: red"><strong>Table with frame="hsides":</strong></p>48 ????????<table frame="hsides">49 ????????????<tr>50 ????????????????<th>Month</th>51 ????????????????<th>Savings</th>52 ????????????</tr>53 ????????????<tr>54 ????????????????<td>January</td>55 ????????????????<td>$100</td>56 ????????????</tr>57 ????????</table>58 59 ????????<p style="color: red"><strong>Table with frame="vsides":</strong></p>60 ????????<table frame="vsides">61 ????????????<tr>62 ????????????????<th>Month</th>63 ????????????????<th>Savings</th>64 ????????????</tr>65 ????????????<tr>66 ????????????????<td>January</td>67 ????????????????<td>$100</td>68 ????????????</tr>69 ????????</table>70 71 ????</body>72 </html>
输出结果：
Web开发——HTML基础（HTML表格）
原文地址：https://www.cnblogs.com/zyjhandsome/p/9783476.html