Css之table布局:

最新推荐文章于 2024-06-20 09:57:29 发布

Sun Peng

最新推荐文章于 2024-06-20 09:57:29 发布

阅读量5.9k

点赞数 5

分类专栏： Html/Css 文章标签： css table

本文链接：https://blog.csdn.net/weixin_53791978/article/details/126609490

版权

Html/Css 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

文章目录

- - - - 1.常用属性:
        2.display:table / display:table-cell 用法
        3.案例：

1.常用属性:

<table></table> 表格
<tr></tr>行
<th></th>特殊的单元格，默认水平居中且加粗
<td></td>列  单元格

【1】table的常用属性

margin：主要设置表格的外边框
padding：设置内边距
border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度
bgcolor：设置背景颜色
background：背景图片
border-collapse：合并边框

tr：行
th/td：单元格
caption：表题
thead:表头内容进行分组
tbody:主体内容进行分组
tfoot:页脚（脚注或表注）内容

【2】tr的属性：

border：边框（粗细、颜色等直接在border后面加“-”加属性即可）
align：水平对齐
vlign：垂直对齐
bgcolor：背景色

【3】th/td的属性

width：单元格的宽度
height：单元格的高度
border：单元格的边框
align：水平对齐
vlign：垂直对齐
bgcolor：背景色
background：背景图片
colspan:跨列（水平合并）
rowspan：跨行（垂直合并）

2.display:table / display:table-cell 用法

display:table  元素会作为块级表格来显示（类似table）；表格前后带有换行符；
display:table-cell 元素会作为表格单元格来显示（类似<td> 和 <th>）

在这里插入图片描述

3.案例：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <style>
        table {
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <!-- table>(tr>td*5)*6 -->

    <table border="1" width=700 height=300 align="center">
        <tr bgcolor="#EBFAF3">
            <td colspan="5">基本情况</td>
        </tr>
        <tr>
            <td width="15%" align="center">姓名</td>
            <td colspan="3"></td>
            <td rowspan="5" align="center"><img src="images/person.png" alt="头像"></td>
        </tr>
        <tr>
            <td align="center">民族</td>
            <td width="15%"></td>
            <td align="center">性别</td>
            <td width="15%"></td>
        </tr>
        <tr>
            <td align="center">政治面貌</td>
            <td></td>
            <td align="center">出生日期</td>
            <td></td>

        </tr>
        <tr>
            <td align="center">籍贯</td>
            <td></td>
            <td align="center">学历</td>
            <td></td>

        </tr>
        <tr>
            <td align="center">电子邮箱</td>
            <td></td>
            <td align="center">联系电话</td>
            <td></td>
        </tr>
    </table>

</body>

</html>