热门标签
热门文章
- 1【chatglm3】（4）：如何设计一个知识库问答系统，参考智谱AI的知识库系统，
- 2YOLOv7教程系列：一、基于自定义数据集训练专属于自己的目标检测模型（保姆级教程，含数据集预处理），包含对train.py/test.py/detect.py/export.py详细说明_yolov7 export.py
- 3【图像分割】Meta分割一切（SAM）模型环境配置和使用教程_sam使用教程
- 4【Python 零基础入门】Pandas
- 52023 “华为杯” 中国研究生数学建模竞赛（F题）深度剖析|数学建模完整代码+建模过程全解全析
- 6WebSocket connection to ‘ws://localhost:3000/ws‘ failed: Error in connection establishment: net::ERR
- 7数字政府！3DCAT实时云渲染助推上海湾区数字孪生平台
- 8『赠书活动 ｜ 第二期』《元宇宙Ⅱ：图解元技术区块链、元资产与Web3.0、元人与理想国（全三册）》
- 9百度「文心一言」阿里「通义千问」腾讯的AI将会叫什么呢_腾讯人工智能
- 10python进阶——人工智能实时目标跟踪_python 目标跟踪
当前位置: article > 正文
HTML网页设计：七、表格_网页设计表格代码
作者：盐析白兔 | 2024-02-13 13:39:00
赞
踩
网页设计表格代码
表格
HTML系列文章目录
- HTML网页设计：一、HTML的基本结构
- HTML网页设计：二、网页的基本标签
- HTML网页设计：三、图像标签之＜img＞标签
- HTML网页设计：四、超链接
- HTML网页设计：五、行内元素和块元素
- HTML网页设计：六、列表
- HTML网页设计：七、表格
- HTML网页设计：八、媒体元素
- HTML网页设计：九、网页的简单布局
- HTML网页设计：十、iframe内联框架
- HTML网页设计：十一、表单
1.表格的定义
HTML中表格由<table>标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由<td>标签定义），表格标题由<caption>标签指定,表头由<th>标签指定。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
其定义格式如下：
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
网页显示如下：
1.表格的常用属性
（1）border属性：表格和边框属性，如果不定义边框属性，表格将不显示边框。
代码示例如下：
<table border="1px">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
网页显示如下：
（2）cellspacing属性：规定单元格之间的空间。
一个具有标题和表头，取消单元格之间间距的表格代码示例如下：
<table border="1px" cellspacing="0"> <caption>一个表格</caption> <tr> <th>第一列</th> <th>第二列</th> </tr> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
网页显示如下：
（3）cellpadding属性：规定单元边沿与其内容之间的空白。
代码示例如下：
<table border="1px" cellspacing="0" cellpadding="10">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
网页显示如下：
（4）bgcolor属性：向表格或表格单元添加背景颜色。
（5）background属性：向表格或表格单元添加背景图像。
（6）align属性：规定表格或单元格中内容的水平对齐方式。属性值可以取left左对齐、right右对齐、center居中对齐这三种。
align属性练习代码示例：
<table border="1px" cellspacing="0" width="500px" align="center">
<tr>
<td align="right">第一行第一列</td>
<td align="right">第一行第二列</td>
</tr>
<tr align="center">
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr align="left">
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
网页显示如下：
3.跨行、跨列单元格
表格中的跨列单元格使用colspan属性，跨行单元格使用rowspan属性。
代码示例如下：
<table border="1" cellspacing="0" width="400px"> <caption>课程表</caption> <tr> <th rowspan="2">时间\星期</th> <th colspan="5">星期</th> </tr> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr> <th rowspan="2">上午</th> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> </tr> <tr> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> </tr> <tr> <th rowspan="2">下午</th> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> </tr> <tr> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> </tr> </table>
- 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
网页显示如图：
所有代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>表格学习</title> </head> <body> <!-- 不带边框的表格--> <table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </table> <br/> <!-- 带边框的表格--> <table border="1px"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </table> <br/> <!--取消单元格间距 带边框的表格 带标题和表头--> <table border="1px" cellspacing="0" > <caption>一个表格</caption> <tr> <th>第一列</th> <th>第二列</th> </tr> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </table> <br/> <!-- 规定单元边沿与其内容之间的间距为10--> <table border="1px" cellspacing="0" cellpadding="10"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </table> <br/> <!-- align属性练习--> <table border="1px" cellspacing="0" width="500px" align="center"> <tr> <td align="right">第一行第一列</td> <td align="right">第一行第二列</td> </tr> <tr align="center"> <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr align="left"> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </table> <br/> <!-- 跨行列练习--> <table border="1" cellspacing="0" width="400px"> <caption>课程表</caption> <tr> <th rowspan="2">时间\星期</th> <th colspan="5">星期</th> </tr> <tr> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> <tr> <th rowspan="2">上午</th> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> </tr> <tr> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> </tr> <tr> <th rowspan="2">下午</th> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> </tr> <tr> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> <td>数学</td> </tr> </table> </body> </html>
- 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
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/80123
推荐阅读
- 带进位循环右移 ...
赞
踩
- 网页设计代码案例 ...
赞
踩
相关标签
