表格 table使用

表格 table

表格是现在基本不常用的一种标签，前端行业前几年常用table来布局，处理、显示表格式数据。这不得不提起当年因为页面标准化启用DIV+CSS布局而造成各大页面重构的血雨腥风，感兴趣的同学自行百度。

创建表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <!-- 跟无序列表一样，table里面只能嵌套tr标签 -->
    <!-- table的属性有：边框-border 单元格与边框的间隙-cellspacing  单元格内容的间隙-cellpading  单元格宽度-width  单元格高度-height  水平对齐方式-align:left center right -->
    <!-- cellspacing 单元格与边框的距离   cellpading 内容与单元格之间的距离 -->
    <!-- 一般三参为：0  border  cellspacing  cellpading -->
    <table width="1000px" align="center" border="1px" cellspacing="0" cellpading="0" height="300px">
        <tr align="center">
            <td>姓名</td>
            <td>性别</td>
            <td>工资</td>
        </tr>
        <tr align="center">
            <td>小红</td>
            <td>女</td>
            <td>500</td>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>男</td>
            <td>500</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述
1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td：用于定义表格中的单元格，必须嵌套在tr标签中，一对 tr 中包含几对td，就表示该行中有多少列（或多少个单元格）。
在这里插入图片描述

表头标签

表头单元格一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签th替代相应的单元格标签td即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表头标签</title>
</head>
<body>
    <!-- 表格标题一般用caption标签定义，体现出是一个整体 -->
    <!-- 一般表头用th取代td标签，表头内容自动加黑变粗居中 -->
    <table width="1000" align="center" border="0" cellspacing="0" cellpading="0" >
        <caption>我是表格标题</caption>
        <tr align="center">
            <th>姓名</th>
            <th>性别</th>
            <th>工资</th>
        </tr>
        <tr align="center">
            <td>小红</td>
            <td>女</td>
            <td>500</td>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>男</td>
            <td>500</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述
caption 标签必须紧随 table 标签之后。
只存在表格里面。

合并单元格

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个，那就多余了2个，需要删除。

公式：删除的个数 = 合并的个数 - 1

合并的顺序先上后下先左后右

先确定是跨行还是跨列合并
根据先上后下先左后右的原则找到目标单元格
删除单元格删除的个数 = 合并的个数 - 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <!-- 合并单元格  跨行合并：rowspan   跨列合并：colspan -->
    <table width="500" border="1" cellspacing="1" cellpadding="1" >
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>工资</td>
            <td>部门</td>
            <td>特殊说明</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>3500</td>
            <td>设计</td>
            <td rowspan="2">rowspan</td>
        </tr>        
        <tr>
            <td>小红</td>
            <td>女</td>
            <td>3000</td>
            <td>后端</td>
        </tr>
    </table>
    <table width="500" border="1" cellspacing="1" cellpading="1" >
        <tr>
            <td>小红</td>
            <td>小明</td>
            <td>小王</td>
        </tr>
        <tr>
            <td colspan="3">colspan</td>
        </tr>
    </table>    
</body>
</html>

在这里插入图片描述
因为现在不常用甚至基本用不上，我们有更好的布局方式，table表格作为了解学习。

陈开心i

发布了23 篇原创文章 · 获赞 0 · 访问量 194

私信关注

表格 table

表头标签

合并单元格

猜你喜欢