表格的介绍与实战（详细且有案例）

smilehjl

已于 2023-12-10 23:14:52 修改

阅读量423

点赞数 8

分类专栏：前端文章标签： html

于 2023-12-10 22:57:41 首次发布

本文链接：https://blog.csdn.net/weixin_45533131/article/details/134915654

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

表格的主要作用：

表格主要是用来展示数据的，使用表格来展示数据，数据可读性更好，更加规范

表格的基本语法：

<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>

1. <table> </table> 是用于定义表格的标签。
2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容。

表格相关的标签

table	表示这是一个表格
th	表示表头，里面的文字会剧中加粗
tr	表示表格中的一行
td	表示表格中的一个单元格（类似于数据库中的一个数据），这是一个容器，里面可以填入任意标签（a标签，p标签）

表格相关的属性

表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置.
目的有2个:
1. 记住这些英语单词,后面 CSS 会使用.
2. 直观感受表格的外观形态

合并单元格：

合并单元格三步曲：
1. 先确定是跨行还是跨列合并。
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
3. 删除多余的单元格。

实战：

案例1：

<!DOCTYPE html>
<html lang="zh_cn">

<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>Document</title>
</head>

<body>
    <table border="1" align="center" whith="800px" height="250px" cellpadding="20px" cellspacing="0px">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>

        
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="./down.jpg"></td>
            <td>354</td>
            <td>124</td>
            <td><span><a href="#">贴吧</a></span>
                <span><a href="#">贴吧</a></span>
                <span><a href="#">贴吧</a></span>
            </td>

        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="./down.jpg"></td>
            <td>354</td>
            <td>124</td>
            <td><span><a href="#">贴吧</a></span>
                <span><a href="#">贴吧</a></span>
                <span><a href="#">贴吧</a></span>
            </td>

        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="./down.jpg"></td>
            <td>354</td>
            <td>124</td>
            <td><span><a href="#">贴吧</a></span>
                <span><a href="#">贴吧</a></span>
                <span><a href="#">贴吧</a></span>
            </td>

        </tr>

        </tbody>
    </table>
</body>

</html>

案例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>Document</title>
</head>
<body>

    <div align="center">
    <h3 >课程表</h3>
    <table border="1" cellpadding="10px">
    <tr>
        <th>项目</th>
        <th colspan="5">上课</th>
        <th colspan="2">休息</th>
    </tr>
    <tr>
        <td>星期</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
        <td>星期日</td>
    </tr>
    <tr>
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="4">休息</td>
    </tr>
    <tr>
        
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        
    </tr>
    <tr>
    
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
    
    </tr>
    <tr>
    
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
    
    </tr>
<tr>
    <td rowspan="2">下午</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>物理</td>
    <td>计算机</td>
    <td rowspan="2">休息</td>
</tr>
<tr>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>物理</td>
    <td>计算机</td>
</tr>
</table>
</div>
</body>
</html>