表格本身并不是用来布局,而是用来展示表格数据
###1.基本结构 table:表格标签(默认独占一行,宽度100%) tr:行标签 td/th:单元格标签,其中th标签中的文本会显示为粗体居中(单元格的宽度由同一列中的最宽的那个元素决定)
<body style="padding:30px;">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三丰</td>
<td>120</td>
</tr>
<tr>
<td>杨过</td>
<td>24</td>
</tr>
</table>
</body>
###2.caption标签 caption标签用来定义表格的标题,caption标签的文本会居中显示
<body style="padding:30px;">
<table>
<caption>我是表格的标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>简介</th>
</tr>
<tr>
<td>张三丰</td>
<td>120</td>
<td>本名张君宝,自创太极拳剑,将武当派发扬光大</td>
</tr>
<tr>
<td>杨过</td>
<td>24</td>
<td>金庸武侠小说《神雕侠侣》的主人公</td>
</tr>
</table>
</body>
###3.为表格添加边框 默认情况下表格是咩有边框的 在table标签中添加border属性,可以为表格添加边框(表格中一般不使用css中的边框属性)。值越大,表格最外层的边框也就越粗。
<body style="padding:30px;">
<table border="1">
...
</table>
<table border="10">
...
</table>
</body>
###4.设定各个单元格之间的间距 在table标签中添加cellspacing属性,可以设定各个单元格之间的间距。这个属性默认值为2
<body style="padding:30px;">
<table border="1" cellspacing="5">
...
</table>
<table border="1" cellspacing="0">
...
</table>
</body>
###5.设定单元格的内边距 在table标签中添加cellpadding属性,可以设定单元格的内边距。这个属性默认值为0(因为单元格的宽度由同一列中的最宽的那个元素决定,所以这个属性只在同一列中的最宽的那个元素上才能看到效果)
<body style="padding:30px;">
<table border="1" cellspacing="0">
...
</table>
<table border="1" cellspacing="0" cellpadding="10">
...
</table>
</body>
原文:https://www.cnblogs.com/OrochiZ-/p/11946347.html