在本节课，我们学习HTML 表格。
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格实例:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
来个例子：
HTML
x
46
46
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<p>10
每个表格从一个 table 标签开始。 11
每个表格行从 tr 标签开始。12
每个表格的数据从 td 标签开始。13
</p>14
15
<h4>一列:</h4>16
<table border="1">17
<tr>18
<td>100</td>19
</tr>20
</table>21
22
<h4>一行三列:</h4>23
<table border="1">24
<tr>25
<td>100</td>26
<td>200</td>27
<td>300</td>28
</tr>29
</table>30
31
<h4>两行三列:</h4>32
<table border="1">33
<tr>34
<td>100</td>35
<td>200</td>36
<td>300</td>37
</tr>38
<tr>39
<td>400</td>40
<td>500</td>41
<td>600</td>42
</tr>43
</table>44
45
</body>46
</html>HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>DEMO演示下：
HTML
xxxxxxxxxx1
43
43
1
2
<html>3
<head>4
<title>HTML 表格 | Web176教程网web176.com</title>5
<meta charset="utf-8">6
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>7
<style>8
.box ol li {9
list-style-type: decimal;10
margin: 0 0 1em 2.5em;11
padding: 0;12
}13
.box ol li, .box ul li {14
font-size: 13px;15
word-break: break-all;16
}17
li, ol, p, ul {18
line-height: 1.5em;19
}20
</style>21
</head>22
<body>23
<div class="box">24
25
<table border="1">26
<tr>27
<th>Header 1</th>28
<th>Header 2</th>29
</tr>30
<tr>31
<td>row 1, cell 1</td>32
<td>row 1, cell 2</td>33
</tr>34
<tr>35
<td>row 2, cell 1</td>36
<td>row 2, cell 2</td>37
</tr>38
</table>39
40
</div>41
42
</body>43
</html>HTML 表格标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
阅读剩余 81%
作者：terry，如若转载，请注明出处：https://www.web176.com/html4/7025.html
支付宝 
微信 