HTML 表格

前言

  • 表格由 <table> 标签来定义。
标签 描述 备注 🔗
<table> </table> 定义表格 🔗
<caption> </caption> 定义表格标题 🔗
<th> </th> 定义表格中的表头单元格(table header cell) 🔗
<tr> </tr> 定义表格中的行(table row) 🔗
<td> </td> 定义表格中的单元(table data cell) 🔗
<thead> </thead> 定义表格中的表头内容 🔗
<tbody> </tbody> 定义表格中的主体内容 🔗
<tfoot> </tfoot> 定义表格中的表注内容(脚注) 🔗
<col /> 定义表格中一个或多个列的属性值 🔗
<colgroup> </colgroup> 定义表格中供格式化的列组 🔗
  • 表格的表头使用 <th> 标签进行定义。
  • 每个表格均有若干行,由 <tr> 标签定义。
  • 每行被分割为若干单元格,由 <td> 标签定义,字母 td 指表格数据,即数据单元格的内容。

  • 表格的数据单元格中可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1、语法

  • 表格使用表格标签 <table> 来设置。

    1
    2
    3
    4
    5
    <table>
    .
    表格 元素
    .
    </table>

2、实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>

    <body>
    <table border="1">
    <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    </table>
    </body>

    </html>
  • 效果

3、属性

3.1 < table > 标签属性

属性 描述 备注 🔗
align left
center
right
HTML5 不支持HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式 🔗
bgcolor rgb(x,x,x)
#xxxxxx
colorname
HTML5 不支持HTML 4.01 已废弃。 规定表格的背景颜色 🔗
border 1
“”
规定表格单元是否拥有边框 🔗
cellpadding pixels HTML5 不支持。规定单元边沿与其内容之间的空白 🔗
cellspacing pixels HTML5 不支持。规定单元格之间的空白 🔗
frame void
above
below
hsides
lhs
rhs
vsides
box
border
HTML5 不支持。规定外侧边框的哪个部分是可见的 🔗
rules none
groups
rows
cols
all
HTML5 不支持。规定内侧边框的哪个部分是可见的 🔗
summary text HTML5 不支持。规定表格的摘要 🔗
width pixels
%
HTML5 不支持。规定表格的宽度 🔗

3.2 < caption > 标签属性

属性 描述 备注 🔗
align left
right
top
bottom
HTML5 不支持HTML 4.01 已废弃。定义标题的对齐方式 🔗

3.3 < th > 标签属性

属性 描述 备注 🔗
abbr text HTML5 不支持。规定表头单元格中内容的缩写版本 🔗
align left
right
center
justify
char
HTML5 不支持。规定表头单元格内容的水平对齐方式 🔗
axis category_name HTML5 不支持。对表头单元格进行分类 🔗
bgcolor rgb(x,x,x)
#xxxxxx
colorname
HTML5 不支持HTML 4.01 已废弃。规定表头单元格的背景颜色 🔗
char character HTML5 不支持。规定根据哪个字符来进行内容的对齐 🔗
charoff number HTML5 不支持。规定对齐字符的偏移量 🔗
colspan number 规定表头单元格可横跨的列数 🔗
headers header_id 规定与表头单元格相关联的一个或多个表头单元格 🔗
height pixels
%
HTML5 不支持HTML 4.01 已废弃。规定表头单元格的高度 🔗
nowrap nowrap HTML5 不支持HTML 4.01 已废弃。规定表头单元格中的内容是否折行 🔗
rowspan number 规定表头单元格可横跨的行数 🔗
scope col
colgroup
row
rowgroup
规定表头单元格是否是行、列、行组或列组的头部 🔗
valign top
middle
bottom
baseline
HTML5 不支持。规定表头单元格内容的垂直排列方式 🔗
width pixels
%
HTML5 不支持HTML 4.01 已废弃。规定表头单元格的宽度 🔗

3.4 < tr > 标签属性

属性 描述 备注 🔗
align right
left
center
justify
char
HTML5 不支持。定义表格行的内容对齐方式 🔗
bgcolor rgb(x,x,x)
#xxxxxx
colorname
HTML5 不支持HTML 4.01 已废弃。规定表格行的背景颜色 🔗
char character HTML5 不支持。规定根据哪个字符来进行文本对齐 🔗
charoff number HTML5 不支持。规定第一个对齐字符的偏移量 🔗
valign top
middle
bottom
baseline
HTML5 不支持。规定表格行中内容的垂直对齐方式 🔗

3.5 < td > 标签属性

属性 描述 备注 🔗
abbr text HTML5 不支持。规定单元格中内容的缩写版本 🔗
align left
right
center
justify
char
HTML5 不支持。规定单元格内容的水平对齐方式 🔗
axis category_name HTML5 不支持。对单元格进行分类 🔗
bgcolor rgb(x,x,x)
#xxxxxx
colorname
HTML5 不支持HTML 4.01 已废弃。规定单元格的背景颜色 🔗
char character HTML5 不支持。规定根据哪个字符来进行内容的对齐 🔗
charoff number HTML5 不支持。规定对齐字符的偏移量 🔗
colspan number 规定单元格可横跨的列数 🔗
headers header_id 规定与单元格相关联的一个或多个表头单元格 🔗
height pixels
%
HTML5 不支持HTML 4.01 已废弃。设置单元格的高度 🔗
nowrap nowrap HTML5 不支持HTML 4.01 已废弃。规定单元格中的内容是否折行 🔗
rowspan number 设置单元格可纵跨的行数 🔗
scope col
colgroup
row
rowgroup
HTML5 不支持。定义将表头单元格与数据单元格相关联的方法 🔗
valign top
middle
bottom
baseline
HTML5 不支持。规定单元格内容的垂直排列方式 🔗
width pixels
%
HTML5 不支持HTML 4.01 已废弃。规定单元格的宽度 🔗

3.6 < thead > 标签属性

属性 描述 备注 🔗
align right
left
center
justify
char
HTML5 不支持。定义 <thead> 元素中内容的对齐方式 🔗
char character HTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐 🔗
charoff number HTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量 🔗
valign top
middle
bottom
baseline
HTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式 🔗

3.7 < tbody > 标签属性

属性 描述 备注 🔗
align right
left
center
justify
char
HTML5 不支持。定义 <tbody> 元素中内容的对齐方式 🔗
char character HTML5 不支持。规定 <tbody> 元素中内容根据哪个字符来对进行文本对齐 🔗
charoff number HTML5 不支持。规定 <tbody> 元素中内容的第一个对齐字符的偏移量 🔗
valign top
middle
bottom
baseline
HTML5 不支持。规定 <tbody> 元素中内容的垂直对齐方式 🔗

3.8 < tfoot > 标签属性

属性 描述 备注 🔗
align right
left
center
justify
char
HTML5 不支持。定义 <tfoot> 元素中内容的对齐方式 🔗
char character HTML5 不支持。规定 <tfoot> 元素中内容根据哪个字符来对进行文本对齐 🔗
charoff number HTML5 不支持。规定 <tfoot> 元素中内容的第一个对齐字符的偏移量 🔗
valign top
middle
bottom
baseline
HTML5 不支持。规定 <tfoot> 元素中内容的垂直对齐方式 🔗

3.9 < col > 标签属性

属性 描述 备注 🔗
align left
right
center
justify
char
HTML5 不支持。规定与 <col> 元素相关的内容的水平对齐方式 🔗
char character HTML5 不支持。规定根据哪个字符来对齐与 <col> 元素相关的内容 🔗
charoff number HTML5 不支持。规定第一个对齐字符的偏移量 🔗
span number 规定 <col> 元素应该横跨的列数 🔗
valign top
middle
bottom
baseline
HTML5 不支持。规定与 <col> 元素相关的内容的垂直对齐方式 🔗
width %
pixels
relative_length
HTML5 不支持。Specifies the width of a <col> element 🔗

3.10 < colgroup > 标签属性

属性 描述 备注 🔗
align left
right
center
justify
char
HTML5 不支持。规定在列组合中内容的水平对齐方式 🔗
char character HTML5 不支持。规定根据哪个字符来对齐列组中的内容 🔗
charoff number HTML5 不支持。规定第一个对齐字符的偏移量 🔗
span number 规定列组应该横跨的列数 🔗
valign top
middle
bottom
baseline
HTML5 不支持。定义在列组合中内容的垂直对齐方式 🔗
width pixels
%
relative_length
HTML5 不支持。规定列组合的宽度 🔗

4、标题

标签 描述 备注 🔗
<caption> </caption> 定义表格标题 🔗
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <table border="1">
    <caption> // 定义 标题
    Monthly savings
    </caption>
    <tr> <th>Month</th> <th>Savings</th> </tr>
    <tr> <td>January</td> <td>$100</td> </tr>
    <tr> <td>February</td> <td>$50</td> </tr>
    </table>
  • 效果

5、表头

标签 描述 备注 🔗
<th> </th> 定义表格中的表头单元格 🔗
  • 大多数浏览器会把表头显示为粗体居中的文本。

5.1 水平表头

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <table border="1">
    <tr>
    <th>Name</th> // 定义 表头
    <th>Tel 1</th> // 定义 表头
    <th>Tel 2</th> // 定义 表头
    </tr>
    <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
    </tr>
    </table>
  • 效果

5.2 垂直表头

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <table border="1">
    <tr>
    <th>First Name</th> // 定义 表头
    <td>Bill Gates</td>
    </tr>
    <tr>
    <th>Tel 1</th> // 定义 表头
    <td>555 77 854</td>
    </tr>
    <tr>
    <th>Tel 2</th> // 定义 表头
    <td>555 77 855</td>
    </tr>
    </table>
  • 效果

6、边框

属性 描述 备注 🔗
border 1
“”
规定表格单元是否拥有边框 🔗
  • 如果不定义边框属性,表格将不显示边框。

6.1 有边框的表格

  • 实例

    1
    2
    3
    4
    <table border="1">	// 定义 表格边框
    <tr> <td>100</td> <td>200</td> <td>300</td> </tr>
    <tr> <td>400</td> <td>500</td> <td>600</td> </tr>
    </table>
  • 效果

6.2 没有边框的表格

  • 实例

    1
    2
    3
    4
    <table border="0">	// border 值为 0
    <tr> <td>100</td> <td>200</td> <td>300</td> </tr>
    <tr> <td>400</td> <td>500</td> <td>600</td> </tr>
    </table>
  • 或者

    1
    2
    3
    4
    <table>			// 不定义 border 属性
    <tr> <td>100</td> <td>200</td> <td>300</td> </tr>
    <tr> <td>400</td> <td>500</td> <td>600</td> </tr>
    </table>
  • 效果

7、单元格 边距 (Cell padding)

属性 描述 备注 🔗
cellpadding pixels HTML5 不支持。规定单元边沿与其内容之间的空白,定义单元格的边距 🔗
  • 使用 Cell padding 来创建单元格内容与其边框之间的空白。

7.1 没有单元格边距

  • 实例

    1
    2
    3
    4
    <table border="1">
    <tr> <td>First</td> <td>Row</td> </tr>
    <tr> <td>Second</td> <td>Row</td> </tr>
    </table>
  • 效果

7.2 有单元格边距

  • 实例

    1
    2
    3
    4
    <table border="1" cellpadding="10">	// 定义 单元格边距
    <tr> <td>First</td> <td>Row</td> </tr>
    <tr> <td>Second</td> <td>Row</td> </tr>
    </table>
  • 效果

8、单元格 间距 (Cell spacing)

属性 描述 备注 🔗
cellspacing pixels HTML5 不支持。规定单元格之间的空白,定义单元格的间距 🔗
  • 使用 Cell spacing 增加单元格之间的距离。

8.1 没有单元格间距

  • 实例

    1
    2
    3
    4
    <table border="1">
    <tr> <td>First</td> <td>Row</td> </tr>
    <tr> <td>Second</td> <td>Row</td> </tr>
    </table>
  • 效果

8.2 有单元格间距

  • 实例,单元格间距为 0

    1
    2
    3
    4
    <table border="1" cellspacing="0">	// 单元格间距="0"
    <tr> <td>First</td> <td>Row</td> </tr>
    <tr> <td>Second</td> <td>Row</td> </tr>
    </table>
  • 效果

  • 实例,单元格间距为 10

    1
    2
    3
    4
    <table border="1" cellspacing="10">	// 单元格间距="10"
    <tr> <td>First</td> <td>Row</td> </tr>
    <tr> <td>Second</td> <td>Row</td> </tr>
    </table>
  • 效果

9、合并单元格

属性 描述 备注 🔗
colspan number 规定单元格可横跨的列数,水平合并单元格 🔗
rowspan number 设置单元格可纵跨的行数,垂直合并单元格 🔗

9.1 水平合并单元格(单元格跨列)

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <table border="1">
    <tr>
    <th>Name</th>
    <th colspan="2">Tel</th> // 单元格跨两列
    </tr>
    <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
    </tr>
    </table>
  • 效果

9.2 垂直合并单元格(单元格跨行)

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <table border="1">
    <tr>
    <th>First Name</th>
    <td>Bill Gates</td>
    </tr>
    <tr>
    <th rowspan="2">Tel</th> // 单元格跨两行
    <td>555 77 854</td>
    </tr>
    <tr>
    <td>555 77 855</td>
    </tr>
    </table>
  • 效果

10、表格内的标签

  • 表格的数据单元格中可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <table border="1">
    <tr>
    <td>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
    </td>
    <td>这个单元格包含一个表格:
    <table border="1">
    <tr>
    <td>A</td>
    <td>B</td>
    </tr>
    <tr>
    <td>C</td>
    <td>D</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>这个单元格包含一个列表
    <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
    </ul>
    </td>
    <td>HELLO</td>
    </tr>
    </table>
  • 效果

11、完整表格示例

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    <!DOCTYPE html>

    <html>

    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    <style>
    .tabtop13 {
    margin-top: 13px;
    }
    .tabtop13 td {
    background-color: #ffffff;
    height: 25px;
    line-height: 150%;
    }
    .font-center {
    text-align: center
    }
    .btbg {
    background: #e9faff !important;
    }
    .btbg1 {
    background: #f2fbfe !important;
    }
    .btbg2 {
    background: #f3f3f3 !important;
    }
    .biaoti {
    font-family: 微软雅黑;
    font-size: 26px;
    font-weight: bold;
    border-bottom: 1px dashed #CCCCCC;
    color: #255e95;
    }
    .titfont {
    font-family: 微软雅黑;
    font-size: 16px;
    font-weight: bold;
    color: #255e95;
    background: url(../images/ico3.gif) no-repeat 15px center;
    background-color: #e9faff;
    }
    .tabtxt2 {
    font-family: 微软雅黑;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    color: #327cd1;
    }
    .tabtxt3 {
    font-family: 微软雅黑;
    font-size: 14px;
    padding-left: 15px;
    color: #000;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 20px;
    }
    </style>
    </head>

    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td align="center" class="biaoti" height="60">受理员业务统计表</td>
    </tr>
    <tr>
    <td align="right" height="25">2017-01-02---2017-05-02</td>
    </tr>
    </table>

    <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
    <tr>
    <td class="btbg font-center titfont" rowspan="2" colspan="2" >受理员</td>
    <td class="btbg font-center titfont" rowspan="2" width="10%">受理数</td>
    <td class="btbg font-center titfont" rowspan="2" width="10%">自办数</td>
    <td class="btbg font-center titfont" rowspan="2" width="10%">直接解答</td>
    <td class="btbg font-center titfont" colspan="2">拟办意见</td>
    <td class="btbg font-center titfont" colspan="2">返回修改</td>
    <td class="btbg font-center titfont" colspan="3">工单类型</td>
    </tr>
    <tr>
    <td width="8%" class="btbg font-center">同意</td>
    <td width="8%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">数量</td>
    <td width="8%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">建议件</td>
    <td width="8%" class="btbg font-center">诉求件</td>
    <td width="8%" class="btbg font-center">咨询件</td>
    </tr>
    <tr>
    <td width="7%" rowspan="8" class="btbg1 font-center">受理处</td>
    <td width="7%" class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    </tr>
    <tr>
    <td width="7%" rowspan="8" class="btbg1 font-center">话务组</td>
    <td width="7%" class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">王艳</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    </tr>
    </table>
    </body>

    </html>
  • 效果

12、HTML 实例

文章目录
  1. 1. 前言
  2. 2. 1、语法
  3. 3. 2、实例
  4. 4. 3、属性
    1. 4.1. 3.1 < table > 标签属性
    2. 4.2. 3.2 < caption > 标签属性
    3. 4.3. 3.3 < th > 标签属性
    4. 4.4. 3.4 < tr > 标签属性
    5. 4.5. 3.5 < td > 标签属性
    6. 4.6. 3.6 < thead > 标签属性
    7. 4.7. 3.7 < tbody > 标签属性
    8. 4.8. 3.8 < tfoot > 标签属性
    9. 4.9. 3.9 < col > 标签属性
    10. 4.10. 3.10 < colgroup > 标签属性
  5. 5. 4、标题
  6. 6. 5、表头
    1. 6.1. 5.1 水平表头
    2. 6.2. 5.2 垂直表头
  7. 7. 6、边框
    1. 7.1. 6.1 有边框的表格
    2. 7.2. 6.2 没有边框的表格
  8. 8. 7、单元格 边距 (Cell padding)
    1. 8.1. 7.1 没有单元格边距
    2. 8.2. 7.2 有单元格边距
  9. 9. 8、单元格 间距 (Cell spacing)
    1. 9.1. 8.1 没有单元格间距
    2. 9.2. 8.2 有单元格间距
  10. 10. 9、合并单元格
    1. 10.1. 9.1 水平合并单元格(单元格跨列)
    2. 10.2. 9.2 垂直合并单元格(单元格跨行)
  11. 11. 10、表格内的标签
  12. 12. 11、完整表格示例
  13. 13. 12、HTML 实例
隐藏目录