Investigator Veritatis

17-样式属性作用在tr和td上

2 min read

1. 样式属性可以写在不同层级

上一篇讲的属性都写在 table 上，作用于整个表格。这些属性同样可以写在 tr 和 td 上，作用范围不同：

写在哪里作用范围
table整个表格
tr当前这一行
td当前这一个单元格

2. 写在 tr 上

align 和 bgcolor 写在 tr 上，表示设置这一整行的文字对齐方式和背景色：

<tr align="center" bgcolor="green">
    <td>1</td>
    <td>张小三</td>
</tr>

3. 写在 td 上

align、bgcolor、width、height 写在 td 上，只作用于这一个单元格：

<td bgcolor="#blue" align="center" width="300px" height="150px">2</td>

4. 完整代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <table border="2" width="800" height="500">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>地址</th>
        </tr>
 
        <!-- align 写在tr当中表示设置这一行的内容的对齐方式(文字) -->
        <tr align="center" bgcolor="green">
            <td>1</td>
            <td>张小三</td>
            <td>18</td>
            <td>男</td>
            <td>燕郊</td>
        </tr>
 
        <tr>
            <td bgcolor="#blue" align="center" width="300px" height="150px">2</td>
            <td>张小三1</td>
            <td>12</td>
            <td>女</td>
            <td>北京</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>张小三1</td>
            <td>12</td>
            <td>女</td>
            <td>北京</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>张小三1</td>
            <td>12</td>
            <td>女</td>
            <td>北京</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>张小三1</td>
            <td>12</td>
            <td>女</td>
            <td>北京</td>
        </tr>
    </table>
</body>
 
</html>

Recent Notes

Graph View