html的表格

表格元素及相关样式

1、<table>标签：声明一个表格

2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

表格相关样式属性

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body,table,tr,th,td{

            padding: 0;

            margin: 0;

        }

        table,th,td{

            border: 1px solid orange; /*表格的外面加上边框*/

            border-collapse: collapse; /*合并表格中的边框*/

        }

        th{

            width: 60px;

        }

        td{

            text-align: center;

        }

    </style>

</head>

<body>

    <table>

        <tr>

            <th>ID</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>性别</th>

        </tr>

        <tr>

            <td>1</td>

            <td>小明</td>

            <td>6</td>

            <td>男</td>

        </tr>

        <tr>

            <td>2</td>

            <td>小花</td>

            <td>8</td>

            <td>女</td>

        </tr>

        <tr>

            <td>3</td>

            <td>小志</td>

            <td>3</td>

            <td>男</td>

        </tr>

    </table>

</body>

</html>

巴特西

html的表格

表格元素及相关样式

表格相关样式属性

最新文章

热门文章