HTML表格

zhangh040629

于 2024-09-02 16:56:38 发布

阅读量427

点赞数 19

文章标签： html 前端

本文链接：https://blog.csdn.net/zhangh040629/article/details/141824077

版权

表格

在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格变成了一个极受欢迎的布局工具。

但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来表示格式化的数据。

table表格的基本结构

表格的创建

行、列、单元格

特点：通常情况下，同行的高度一致，同列表的宽度一致。

创建一个表格：

<body>
    <!-- 
        table--创建表格 
            tr--定义表格中的行
            td--定义表格数据
    -->
    <table>
        <!-- tr--定义表格中的行 -->
        <tr>
            <!-- th-表示表头 -->
            <th>111</th>
            <th>2222</th>
        </tr>
        <tr>
            <!-- td--定义表格数据(定义单元格中的内容) -->
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

此时发现没有线，需要借助我们后面学的表格属性。
创建快捷方式：table>(tr>td2)2 或者 table>tr2>td2

表格属性

宽度 width
高度 height
边框 border
边框颜色 bordercolor
背景颜色 bgcolor
水平对齐 align=“left/right/center”
cellspacing=“单元格与单元格之间的间距”
cellpadding=“单元格与内容之间的空隙”

<body>
    <!-- 
        给表格table设置属性
        border 外边框
        width  宽度，支持px，百分比-相对于父元素的百分之多少
                            table的父元素是body，就是内容的即窗口的宽度
        height 高度，支持px，百分比-相对于父元素的百分之多少
                            现在相当于body,高度是靠内容给撑开的(比如建楼，宽度是地基的宽度，高度是楼垒高起来最后的高度)  
        align  水平对齐方式：left/center/right  
        bordercolor 边框颜色 
        bgcolor 背景颜色   
        cellspacing 单元格直接的间距
        cellpadding 单元格与内容之间的空隙
     -->
    <table 
        border="1" 
        width="50%" 
        height="500px"
        align="center"
        bordercolor="red"
        bgcolor="yellow"
        cellspacing="0"
        cellpadding="100"
    >
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

我们是对整个表格进行设置的属性，怎么改变某一行或者某一列的宽高背景颜色呢？

行tr 属性

高度 height
背景颜色 bgcolor
文字水平对齐 align=“left/center/right”
文字垂直对齐 valign=“top/middle/bottom”
tr —> table row的缩写

<body>
    <!-- 
        tr-table row的缩写
        height 高度
        bgcolor 背景颜色
        align 文字水平对齐 left/center/right
        valign  文字垂直对齐，top/middle/bottom
    -->
    <table border="1" width="300" bgcolor="yellow" align="center">
        <!-- 可以设置高度，不能设置宽度，因为行是对于整个行,不能改变列 -->
        <tr 
            bgcolor="orange" 
            height="300px" 
            align="center"
            valign="center"
        >
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

单元格td属性

宽度 width
高度 height
背景颜色 bgcolor
文字水平对齐 align=“left/center/right”
文字垂直对齐 valign=“top/middle/bottom”
td —> table data 存放数据的这样一个地方,表示表格中的一个单元格。

<body>
    <!-- 
        td: width 如果一个单元格设置宽度，影响的是一整列的宽度
            height 如果一个单元格设置高度，影响的是一整行的高度
            bgcolor 控制某一个单元格的背景颜色
            align  文字水平对齐left/center/right
            valign 文字垂直对齐top/middle/bottom
     -->
    <table border="1" width="300" height="300" bgcolor="yellow" align="center">
        <tr>
            <td width="200">1</td>
            <td height="200">2</td>
        </tr>
        <tr>
            <td bgcolor="red">3</td>
            <td align="right" valign="top">4</td>
        </tr>
    </table>
</body>

合并单元格

表格合并列
Colspan=“所要合并的单元格的列数”，必须给td。
如：Colspan=“2”

Rowspan=“所要合并的单元格的行数”，必须给td。
如：Rowspan=“5”

举例：

<body>
    <table style="margin-top: 100px;" border="1" width="400" height="300" cellspacing="0" align="center">
        <tr align="center">
            <td colspan="2"> 甄嬛 </td>
            <!-- <td colspan="2" rowspan="2"> 皇后 </td> -->
            <!-- <td> 祺贵人 </td> -->
        </tr>
        <tr align="center">
            <td rowspan="2"> 敬妃 </td>
            <!-- <td colspan="2"> 安小鸟</td> -->
            <!-- <td> 眉姐姐 </td> -->
        </tr>
        <tr align="center">
            <!-- <td> 齐妃</td> -->
            <!-- <td> 华妃</td> -->
            <td colspan="2"> 端妃</td>
        </tr>
    </table>
</body>

zhangh040629

关注

19
点赞
踩
12

收藏

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

在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格变成了一个极受欢迎的布局工具。但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来表示格式化的数据。table表格的基本结构。
复制链接

扫一扫