HTML表格使用详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47481102/article/details/124008494

这篇博客详细介绍了HTML表格的用途，包括基本语法、表头单元格的使用、表格属性的了解以及如何合并单元格。强调表格主要用于数据展示，不应用于页面布局。重点讲解了<td>、<th>、<table>等标签的用法，并提示了表格属性和合并单元格的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.表格的主要作用

表格主要是用于显示、展示数据，可以让数据展示的规整，可读性好。

表格不是用来布局页面的，二十用来展示数据的。

2.表格的基本语法

1.<table></table>是用于定义表格的标签。

2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。

3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4.字母td指表格数据（table data），即数据单元格的内容。

<table>
    <tr>
        <td>
            <table>是表格，<tr>是行，<td>是单元格！！！
        </td>
    </tr>
</table>

3.表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文字内容加粗居中显示。

<th>标签表示HTML表格的表头部分（table head的缩写）。

<table>
    <tr>
        <th>
            <table>是表格，<tr>是行，<th>是表头单元格！！！
        </th>
    </tr>
</table>

表头单元格样也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中展示。

4.表格属性

表格标签这部分属性去哦们实际开发中不常用，后面通过CSS来设置。

目前有两个：

1.记住这些英文单词，后面CSS会使用。

2.直观感受表格的外观形态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例：小说排行</title>
</head>
<body>
    <table  border="1" align="center" cellspacing="0"  cellpadding="10" width="500" height="249">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="下降.png" ></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="下降.png" ></td>
            <td>124</td>
            <td>675432</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="上升.png" ></td>
            <td>212</td>
            <td>7654</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>4</td>
            <td>东游记</td>
            <td><img src="上升.png" ></td>
            <td>23</td>
            <td>74645</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td><img src="下降.png" ></td>
            <td>567654</td>
            <td>1321321</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td><img src="上升.png" ></td>
            <td>222345</td>
            <td>122123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td><img src="上升.png" ></td>
            <td>345</td>
            <td>1723</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
    </table>
</body>
</html>

5.合并单元格

合并单元格三部曲：

1.先确定是跨行还是跨列合并。

2.找到目标单元格，写上合并方式=合并的单元格数量，如<td colspan="2"></td>.

3.删除多余的单元格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <table border="1"  cellspacing="0" width="500" height="149">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>

        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>