1 表格样式属性

table 标签上可以直接设置一些外观属性,但这些属性在官方文档中已标记为废弃,了解即可,实际开发统一交给 CSS 处理。

2 各属性说明

属性说明示例值
border边框粗细2
cellspacing单元格之间的间距3px
cellpadding单元格内文字与边框的距离(内边距)5px
width整个表格的宽度800px
height整个表格的高度1000px
align表格在页面中的对齐方式left / center / right
bgcolor表格背景颜色英文单词 / #fff000

2.1 align 对齐方式

  • left:默认值,靠浏览器左边显示。
  • center:居中显示。
  • right:靠右显示。

2.2 bgcolor 颜色写法

颜色有两种表示方式:用英文单词(redyellowblue 等),或用十六进制 RGB 值(#fff000,由 0~9a~f 组成,分别代表红、绿、蓝三个通道)。

3 完整代码

<!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>
    <!-- 
        以下属性值,玩一下就行了,之后我们会统一使用css样式来设置.在官方文档当中,已经标记为废弃的属性.
        border: 边框
        cellspacing: 单元格之间的距离
        cellpadding: 文字的内边距
        width: 宽度(整个表格的宽度)
        height: 整个表格的调度
        align: 表格对齐方式
            1. left, 默认值,左对齐,靠浏览器左边显示
            2. center, 居中显示
            3. right, 靠右显示
        bgcolor: 背景颜色
            颜色写点啥: 
                1. 常见的表示颜色的英文单词
                    red, yellow, black, green, blue
                2. #fff000 rgb, red, green, blue
                0~9, a b c d e f
    -->
    <table border="2" cellspacing="3px" 
    cellpadding="5px" width="800px" height="1000px" align="left"
    bgcolor="red">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>地址</th>
        </tr>
 
        <tr>
            <td>1</td>
            <td>张小三</td>
            <td>18</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>
 
        <tr>
            <td>2</td>
            <td>张小三1</td>
            <td>12</td>
            <td>女</td>
            <td>北京</td>
        </tr>
    </table>
</body>
 
</html>