table标签
<table> 标签⽤来定义表格。每个表格均有若⼲⾏（由 <tr> 标签定义），每⾏被分割为若⼲单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含⽂本、图⽚、列表、段落、表单、⽔平线、表格等等。
table的属性与⽤法
表格标签
表格意义
<table>定义表格
<thead>定义表格的页眉。
<tbody>定义表格的主题。
<tfoot>定义表格的页脚。
<th>定义表格的表头。
<tr>定义表格的⾏。
<td>定义表格的列。
1.<table>
1.1border
⽤于设置表格边框的宽度
不加border属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table>
<tr>
<td>⼀⾏⼀列</td>
<td>⼀⾏⼆列</td>
<td>⼀⾏三列</td>
</tr>
<tr>
<td>⼆⾏⼀列</td>
<td>⼆⾏⼆列</td>
<td>⼆⾏三列</td>
</tr>
<tr>
<td>⼀⾏⼀列</td>
<td>⼀⾏⼆列</td>
<td>⼀⾏三列</td>
</tr>
</table>
</body>
</html>
代码运⾏结果：
添加border属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table border="1">
<tr>
<td>⼀⾏⼀列</td>
<td>⼀⾏⼆列</td>
<td>⼀⾏三列</td>
</tr>
<tr>
<td>⼆⾏⼀列</td>
<td>⼆⾏⼆列</td>
<td>⼆⾏三列</td>
</tr>
<tr>
<td>⼀⾏⼀列</td>
<td>⼀⾏⼆列</td>
<td>⼀⾏三列</td>
</tr>
</table>
</body>
</html>
代码运⾏结果：
1.2、width和height⽤来设置表格的宽度与长度(可以使⽤像素和百分⽐两种⽅式)
<title>table</title>
</head>
<body>
<table border="1" width="100" height="80%">
<tr>
table设置内边框<td>⼀⾏⼀列</td>
<td>⼀⾏⼆列</td>
<td>⼀⾏三列</td>
</tr>
<tr>
<td>⼆⾏⼀列</td>
<td>⼆⾏⼆列</td>
<td>⼆⾏三列</td>
</tr>
<tr>
<td>⼀⾏⼀列</td>
<td>⼀⾏⼆列</td>
<td>⼀⾏三列</td>
</tr>
</table>
</body>
</html>
代码运⾏结果：
1.3、align
设置表格的对齐⽅式，属性值有left(左对齐(默认))、center(居中)、right(右对齐)三种
<title>table</title>
</head>
<body>
<table border="1" width="100" height="60" align="center">
<tr>
<td>⼀⾏⼀列</td>
<td>⼀⾏⼆列</td>
<td>⼀⾏三列</td>
</tr>
<tr>
<td>⼆⾏⼀列</td>
<td>⼆⾏⼆列</td>
<td>⼆⾏三列</td>
</tr>
<tr>
<td>⼀⾏⼀列</td>
<td>⼀⾏⼆列</td>
<td>⼀⾏三列</td>
</tr>
</table>
</body>
</html>
代码运⾏结果：
1.4cellspacing和cellpadding
cellspacing：规定单元格之间的空⽩。(单位：px;) cellpadding：规定单元边沿与其内容之间的空⽩。(单位：px；)
只设置cellspacing的值时
<title>table</title>
<style type="text/css">
</style>
</head>
<body>
<table width="80" height="100" align="center" border="1" cellspacing="1">      <thead>
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tfoot>
<tr>
<td>总和</td>
<td>190</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>张三</td>
<td>97</td>
</tr>
<tr>
<td>李四</td>
<td>93</td>
</tr>
</tbody>
</table>
</body>
</html>
代码运⾏结果：
当cellspacing的值等于0时，就和我们平时看见的表格⼀样。
只设置cellpadding的值时

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。