【web:html+css基础】表格标签

最新推荐文章于 2024-04-19 20:39:07 发布

码先生的幸福生活

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量329

点赞数

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

本文链接：https://blog.csdn.net/hk_is_my_dream/article/details/126267170

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.表格的主要作用

表格主要用于显示、展示数据。因为它可以让数据显示得非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理（合理的使用表格也能够有效提高 SEO）。

**注意：**表格不是用来布局页面的，而是用来展示数据的。表格常用于表单数据的 “布局”。

特别强调，表格是用于表单数据的 "布局"，而不是页面的布局！

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

2.表格属性

**注意：表格标签的属性在实际开发中并不常用，而是通过后面的 CSS 来设置，这里了解即可。

以下属性都写在 table 开始标签内，多个属性之间用空格隔开。

属性名	属性值	描述
align	left、、centerright	规定表格相对周围元素的对齐方式（默认 left），注意指的是整个表格的对齐方式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐方式（单元格内容对齐可以通过：设置）（了解）style="text-align: center;"
border	1或""	规定表格单元是否拥有边框，默认为 ""，表示没有边框（了解）
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认 1 像素（了解）
cellspacing	像素值	规定单元格之间的空白，默认 2 像素（了解）
width	像素值或百分比	规定表格的宽度（了解）
height	像素值或百分比	规定表格的高度（了解）
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

3.表格结构标签

<thead> </thead> ：用于定义表格的头部， <thead> 内部必须拥有 <tr> 标签，一般是位于第一行，且一般 <tr> 标签中推荐放置 <th> 标签

<tbody> </tbody> ：用于定义表格的主体，主要用于放数据本体

tfoot:表格底部

以上标签都是放在标签中 <table> </table>

4.合并单元格

合并单元格的方式：

跨行合并（上下合并）： rowspan="合并单元格的个数"

跨列合并（左右合并）： colspan="合并单元格的个数"

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并

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

删除多余单元格

注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并(不能跨：thead、tbody、tfoot)

<!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>
    <table border="1" width="622" height="500">
        <caption><strong>学生成绩表</strong></caption>  <!-- 表格标题 -->
        <!-- 表格头部 -->
       <thead>
         <tr>
            <!-- <td>姓名</td>
            <td>成绩</td>
            <td>评语</td> -->
            <th >姓名</th>
            <th >成绩</th>
            <th >评语</th>
            <!-- 表头标签th，可以替换td标签 -->
        </tr>
       </thead>
       <!-- 表格主体 -->
       <tbody>
         <tr>
            <td>小明</td>
            <td rowspan="2">100</td><!-- 跨行合并：上下 -->
            
            <td>孩子，考的真好</td>
        </tr>
        <tr>
            <td>胖龙</td>
          
            <td>成绩不比体重差</td>
        </tr>
       </tbody>
       <!-- 表格底部 -->
       <tfoot>
        <tr>
            <td>总结</td>
           
            <td colspan="2">胖才是真理</td> <!-- 跨列合并：左右 -->
        </tr>
       </tfoot>
    </table>
</body>
</html>