Css之table布局:

文章目录

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


1.常用属性:
表格 行 特殊的单元格,默认水平居中且加粗 列 单元格

【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>

Css之table布局:_第1张图片

3.案例:

Css之table布局:_第2张图片

<!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>

你可能感兴趣的:(Html/Css,css,table)