HTML基础03-HTML标签（下）01-表格标签
HTML基础03-HTML标签（下）01-表格标签
yangjiao
发布于 2021-03-04 10:47:42
发布于 2021-03-04 10:47:42
03-HTML标签（下）
01-表格标签
表格标签是在实际开发中非常常用的标签
1.1表格的主要作用
表格主要是用来显示、展示数据的，因为它可以让数据显示的非常规整，具有良好的可读性。特别是在后台展示数据时，熟练运用表格就显得尤为重要。一个清爽简约的表格能够把繁杂的数据表现的条理有序。
1.2表格的基本语法
<table>
<tr>
<td>单元格1</td> <td>单元格2</td> <td>单元格3</td>
</tr>
<tr>
<td>单元格4</td> <td>单元格5</td> <td>单元格6</td>
</tr>
...
</table>- <table></table>是用于定义表格的标签
- <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>中
- <td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>中
- 单元格<td></td>中可以放任何元素，图片、文字、超链接等都可以
1.3表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th></th>标签表示HTML表格的表头部分（table head的缩写）
<table>
<tr>
<th>姓名</th> <th>年龄</th> <th>学校</th>
...
</tr>
...
</table>1.4表格属性
表格标签的属性在实际开发中不常用，后面会通过CSS来设置
属性名 | 属性值 | 说明 |
|---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或"" | 规定表格单元是否拥有边框，默认""，表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
代码演示
<table align="left" border="1" cellspacing="0" cellpadding="10" width="300" height="40">
<tr>
<th>姓名</th> <th>年龄</th> <th>学校</th>
</tr>
<tr>
<td>李华</td> <td>20</td> <td>第二中学</td>
</tr>
<tr>
<td>大明</td> <td>19</td> <td>第六中学</td>
</tr>
</table>1.5案例演示
<!-- 小说排行榜案例 -->
<table align="center" border="1" cellspacing="0" width="500" height="160">
<thead>
<tr>
<th>排名</th> <th>关键字</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td> <td>鬼吹灯</td> <td>↓</td> <td>3405</td> <td>25420</td>
<td><a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
<a href="https://baike.baidu.com/item/%E6%B3%95%E5%8C%BB%E7%A7%A6%E6%98%8E/4080601?fr=aladdin">百科</a></td>
</tr>
<tr>
<td>2</td> <td>法医秦明</td> <td>↑</td> <td>3203</td> <td>24484</td>
<td><a href="https://tieba.baidu.com/f?ie=utf-8&fr=bks0000&kw=%E6%B3%95%E5%8C%BB%E7%A7%A6%E6%98%8E">贴吧</a>
<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></td>
</tr>
<tr>
<td>3</td> <td>守夜者</td> <td>↑</td> <td>2903</td> <td>20484</td>
<td><a href="https://tieba.baidu.com/f?ie=utf-8&fr=bks0000&kw=%E6%B3%95%E5%8C%BB%E7%A7%A6%E6%98%8E">贴吧</a>
<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></td>
</tr>
<tr>
<td>4</td> <td>河神</td> <td>↑</td> <td>3203</td> <td>196484</td>
<td><a href="https://tieba.baidu.com/f?ie=utf-8&fr=bks0000&kw=%E6%B3%95%E5%8C%BB%E7%A7%A6%E6%98%8E">贴吧</a>
<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></td>
</tr>
</tbody>
</table>
在这里插入图片描述
1.6表格结构标签
使用场景：因为表格可能很长，为了更好的表示出表格的语义，可以将表格分割为表格头部和表格主体两大部分。在表格标签中分别用<thead>标签表示表格头部区域，用<tbody>标签表示表格的主体区域，这样可以更好的分清表格结构。
<thead></thead>与<tbodt></tbody>的使用可以查看上述小说排行案例
1.7合并单元格
特殊情况下，可以把多个单元格合并为一个单元格。
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/01/31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
