HTML基础学习（3）——认识表格

最新推荐文章于 2024-10-02 23:31:06 发布

换元不配限

最新推荐文章于 2024-10-02 23:31:06 发布

阅读量477

点赞数

分类专栏： web前端文章标签： html 学习表格

本文链接：https://blog.csdn.net/ITMonkeyKing/article/details/128890287

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了HTML中创建表格的基本结构，包括<table>、<caption>、<th>、<tr>和<td>标签，以及表格的属性如border、cellpadding和cellspacing等。同时讲解了表格行的对齐属性和单元格的跨行、跨列属性，以及HTML5中不再支持的部分属性。

摘要由CSDN通过智能技术生成

往期文章

# 1.表格基本组成 HTML中表格使用表格标签\和多个行\、表头\

或单元格\	组成。

标签	描述
<table>	定义表格
<caption>	定义表格标题
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元

    <table>
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>

2.表格的基本属性

border：规定表格边框的宽度
cellpadding：单元格边缘与其内容之间的空白
cellspacing：单元格之间的空白
frame：外框边侧哪个部分可见
rules：内测边框哪个部分可见
summary：表格的摘要
width：表格的宽度

    <table border="1" width="500px" cellspacing="10" cellpadding="5">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>

3.表格行属性

属性	值	描述
align	right left center justify char	表格行的内容对齐方式
char	character	根据哪个字符来进行文本对齐
charoff	number	第一个对齐字符的偏移量
valign	top middle bottom baseline	表格行中内容的垂直对齐方式

    <table border="1" width="500px" cellspacing="10" cellpadding="5" summary="表格摘要内容填写">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr align="right">
            <td>小强</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <!-- HTML5 不支持 <tr> valign 属性。请使用 CSS 代替 -->
        <tr valign="bottom">
            <td>小文</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>

4.单元格属性

属性	值	描述
abbr	text	单元格中内容的缩写版本
align	left right center justify char	单元格内容水平对齐方式
axis	category_name	对单元进行分类
char	character	根据哪个字符来进行内容的对齐
charoff	number	对齐字符的偏移量
colspan	number	单元格横跨的列数
headers	id	与单元格相关的表头
rowspan	number	单元格横跨的行数
scope	col colgroup row rowgroup	将表头数据与单元数据相关联的方法
valign	top middle bottom baseline	单元格内容的垂直排列方式

<body>

    <table border="1" width="500px" cellspacing="10" cellpadding="15" summary="表格摘要内容填写">
        <caption>成绩单</caption>
        <tr>
            <!--跨行属性-->
            <td rowspan="6">龙安小学</td>
        </tr>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr align="right">
            <td>小强</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <!-- HTML5 不支持 <tr> valign 属性。请使用 CSS 代替 -->
        <tr valign="bottom">
            <td>小文</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>总计</td>
            <!--跨列属性-->
            <td colspan="4"></td>
        </tr>
    </table>
    
</body>

5. 表格结构

表首标签<thead>、表主体标签<tbody>、表尾标签<tfoot>。

需要在<table>标签内使用它们。

标签	描述
<thead>	定义表格的表头
<tbody>	定义表格的主体
<tfoot>	定义表格的尾部

完整的HTML文档如下：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>表格demo</title>
</head>
<body>

    <table border="1" width="500px" cellspacing="10" cellpadding="15" summary="表格摘要内容填写">
        <caption>成绩单</caption>
        <tr>
            <td rowspan="6">龙安小学</td>
        </tr>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr align="right">
            <td>小强</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <!-- HTML5 不支持 <tr> valign 属性。请使用 CSS 代替 -->
        <tr valign="bottom">
            <td>小文</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tfoot>
            <tr>
                <td>总计</td>
                <td colspan="4"></td>
            </tr>
        </tfoot>
       
    </table>
    
</body>
</html>