HTML表格

最新推荐文章于 2024-07-21 20:59:57 发布

芋圆不想圆

最新推荐文章于 2024-07-21 20:59:57 发布

阅读量1.4k

点赞数

文章标签： html5 前端

本文链接：https://blog.csdn.net/m0_52900946/article/details/123617287

版权

表格是html5中的重要布局之一，包含的内容十分广泛，一般使用<table>标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或<td>元素组成表格, <tr>元素表示表格的行，<th>元素表示表头，<td> 元素定义单元格。

2.1 表格属性

<table border="1"> </table>
 <!-- 表示表格的边框宽度为1px -->

<table width="400" height="200"> </table>
 <!-- 表示表格长宽分别为400px和200px -->

<table border="1" bgcolor="red"> </table>
 <!-- 表示表格的背景颜色是红色 -->

<table border="1" background="img/01.png"> </table>
 <!-- 为表格设置背景图片 -->

<table border="1" bordercolor="red"> </table>
 <!-- 表格的边框颜色是红色 -->

<table border="1" cellspacing="10"> </table>
<!-- 设置表格单元格之间的间距是10px -->

<table border="1" cellpadding="10"> </table>
<!-- 设置单元格中的文字与单元格边框之间的距离是10px -->

设置单元格的长宽，背景颜色时，和设置表格属性类似，不同的是把属性写在<td>中

2.2 设置单元格格式

2.2.1 `align`

设置单元格内容水平对齐的属性

<body>
    <table border="1" width="300" height="50">
        <tr>
            <td align="left">左边</td>
            <td align="center">居中</td>
            <td align="right">右边</td>
        </tr>
    </table>
</body>

请添加图片描述

2.2.2 `valign`

设置单元格中内容垂直显示的位置

<body>
    <table border="1" width="300" height="50">
        <tr>
            <td align="left">左边</td>
            <td align="center">居中</td>
            <td align="right">右边</td>
        </tr>
    </table>
</body>

请添加图片描述

2.2.3 `colspan /rowspan`

设置表格的跨行和跨列

<body>
    <table border="1">
        <tr>
            <td colspan="3">跨列</td>
        </tr>
        <tr>
            <td rowspan="2">跨行</td>
            <td>A</td>
            <td>1</td>
        </tr>
        <tr>
            <td>B</td>
            <td>2</td>
        </tr>
    </table>
</body>

示例如图

2.3 表格的结构化和直列化

2.3.1 表格的结构化

主要分为表头，主体，表尾三个部分，每一个部分改变不影响其他部分，方便对表格进行操作

<body>
    <table width="500" border="1">
        <!-- 通常出现在表格的顶部，不在表格内部 -->
        <caption>标题</caption>
        <!-- 定义表格表头，表现为标题行 -->
        <thead>
            <tr>
                <th>头部</th>
            </tr>
        </thead>
        <!-- 定义一段主体，可以有多个主体，也可以按照行进行分组 -->
        <tbody>
            <tr>
                <td >主体</td>
            </tr>
        </tbody>
        <!-- 定义表格的底部，表现为总计行 -->
        <tfoot>
            <tr>
                <td>底部</td>
            </tr>
        </tfoot>
    </table>
</body>

请添加图片描述

2.3.2 表格的直列化

通过表格的直列化对表格的列进行分组，方便表格的格式化

<body>
    <table width="500">
        
        <!-- 基本语法 -->
        <colgroup style="background-color: bisque;">  <!-- 前两列为一组 -->
            <col>   <!-- 第一列 -->
            <col>   <!-- 第二列 -->
        </colgroup>
        <col style="background-color: aliceblue;">
         <!-- 基本语法 end -->
        
        <caption>标题</caption>
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表尾1</td>
                <td>表尾2</td>
                <td>表尾3</td>
            </tr>
        </tfoot>
    </table>
</body>

请添加图片描述

芋圆不想圆

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML表格

表格是html5中的重要布局之一，包含的内容十分广泛，一般使用<table>标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或<td>元素组成表格, <tr>元素表示表格的行，<th>元素表示表头，<td> 元素定义单元格。2.1 表格属性<table border="1"> </table> <!-- 表示表格的边框宽度为1px
复制链接

扫一扫