html5的colgroup,HTML5 教程之HTML <colgroup> 标签

本文介绍了HTML中用于表格列组合的标签及其用法。通过使用该标签,可以轻松地对表格中的列进行格式化,避免了重复设置每个单元格或行样式的麻烦。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML 

 标签

实例

和 标签为表格中的三个列设置了背景色:
ISBNTitlePrice
3476896My first HTML$53

尝试一下 »

浏览器支持

ad318d208c5d780e05577150b2b21ec9.gif 

0a9eaad278d4fd3f3fbae79762cbffb9.gif 

2317c41d92b393a990fd1229d5e1fbe7.gif 

1cc3a8bf2647d630cbd4142993df88e4.gif 

49ad3049b99bf8450652f684ceead8f4.gif

所有主流浏览器都支持

标签。

标签定义及使用说明

标签用于对表格中的列进行组合,以便对其进行格式化。

通过使用

标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。

注释:只能在

提示:如果想对

中的某列定义不同的属性,请在 标签内使用  标签。

HTML 4.01 与 HTML5之间的差异

HTML5 中不再支持 HTML 4.01 中的大部分属性。

属性

属性

描述

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 不支持。规定列组合的宽度。

全局属性

标签支持 HTML 的全局属性。

事件属性

标签支持 HTML 的事件属性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>太阳系行星数据</title> <link href="minimal-table.css" rel="stylesheet"> </head> <body> <h1>太阳系行星数据</h1> <header> <table id="table"> <caption> 太阳系中行星的一些数据。(资料取自<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">NASA 行星数据 - 公制</a>,图片取自<a href="https://www.nasa.gov/multimedia/imagegallery/">NASA 照片库。</a>) </caption> <thead> <td colspan="2"></td> <th scope="col" class="name-column" >名字</th> <th scope="col">图片</th> <th scope="col">质量 (10<sup>24</sup>kg)</th> <th scope="col">直径 (km)</th> <th scope="col">密度 (kg/m<sup>3</sup>)</th> <th scope="col">重力 (m/s<sup>2</sup>)</th> <th scope="col">天长 (小时)</th> <th scope="col">平均温度 (°C)</th> <th scope="col">卫星数量</th> <th scope="col">备注</th> </thead> <tbody> <tr> <th colspan="2" rowspan="4" scope="rowgroup">类地行星</th> <th>水星</th> <td>0.330</td> <td>4879</td> <td>5427</td> <td>3.7</td> <td>4222.6</td> <td>57.9</td> <td>167</td> <td>0</td> <td>距太阳最近</td> </tr> <tr> <th>金星</th> <td>4.87</td> <td>12104</td> <td>5243</td> <td>8.9</td> <td>2802.0</td> <td>108.2</td> <td>464</td> <td>0</td> <td></td> </tr> <tr> <th>地球</th> <td>5.97</td> <td>12756</td> <td>5514</td> <td>9.8</td> <td>24.0</td> <td>149.6</td> <td>15</td> <td>1</td> <td>我们的世界</td> </tr> <tr> <th>火星</th> <td>0.642</td> <td>6792</td> <td>3933</td> <td>3.7</td> <td>24.7</td> <td>227.9</td> <td>-65</td> <td>2</td> <td>红色星球</td> </tr> <tr> <th rowspan="4" scope="rowgroup">类木行星</thead> <th rowspan="2" scope="rowgroup">气巨星</th> <th>木星</th> <td>1898</td> <td>142984</td> <td>1326</td> <td>23.1</td> <td>9.9</td> <td>778.6</td> <td>-110</td> <td>67</td> <td>太阳系最大</td> </tr> <tr> <th>土星</th> <td>568</td> <td>120536</td> <td>687</td> <td>9.1</td> <td>10.7</td> <td>1433.5</td> <td>-140</td> <td>62</td> <td></td> </tr> <tr> <th rowspan="2" scope="rowgroup">冰巨星</th> <th>天王星</th> <td>86.8</td> <td>51118</td> <td>1271</td> <td>8.7</td> <td>17.2</td> <td>2872.5</td> <td>-195</td> <td>27</td> <td></td> </tr> <tr> <th>海王星</th> <td>102</td> <td>49528</td> <td>1631</td> <td>11.0</td> <td>16.1</td> <td>4495.1</td> <td>-200</td> <td>14</td> <td></td> </tr> <tr> <th colspan="2" scope="row">矮行星</th> <th>冥王星</th> <td>0.0146</td> <td>2370</td> <td>2095</td> <td>0.7</td> <td>153.3</td> <td>5906.4</td> <td>-225</td> <td>5</td> <td>2006年降格,但<a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">尚存争议</a></td> </tr> </tbody> </table> </body> </html> 这个是全部代码。我现在要在“名字”这一列添加一个整体的黑色边框应该怎么弄
最新发布
08-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值