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>

 

posted @ 2018-09-19 21:19  苦瓜爆炒牛肉  阅读(212)  评论(0)  编辑  收藏  举报