表格标记

这篇博客详细介绍了HTML中创建表格的方法,包括基本构成如table、tr、td,以及表格的标题caption、表头th的设置。此外,还讲解了表格的各种属性,如宽度、高度、对齐方式、边框厚度、边框颜色、内框宽度、文字与边框间隔、背景颜色和图像,以及行和单元格的属性。最后提到了表格的结构,如thead、tbody和tfoot的使用。

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

1.创建表格

1.1 表格的基本构成table、tr、td

table是针对整个表格的标记,它用于设置对应于整个表格的属性;

tr是针对行的标记,它用于设置对应于行的属性;

td是针对单元格的标记,它用于设置对应于单元格的属性;

==========================================

<table>

<tr>

<td>第一行第一个</td>

<td>第一行第二个</td>

</tr>

<tr>

<td>

第二行第一个</td>

<td>第二行第二个</td>

</tr>

</table>

==========================================

效果如下:

==========================================

1.2 设置表格的标题caption

<table>

<caption>表格标题</caption>

...

</table>

因为caption标记是在table内的,所以使用caption标记的好处就是当整个表格发生变化时(例如移动),那么caption也会相对应的变化

1.3 表头th

表头实际上是单元格的变体,使用表头,一般情况下浏览器会以粗体和居中对齐的方式来显示文字

使用方法跟单元格一样(见下面单元格的讲解)


2.表格的基本属性

表格的基本属性包括宽度width、高度height、对齐方式align

宽度width、高度height:

宽高是指整个表格的大小设置

对齐方式align:

指表格的整体位置是left、center、right中的一种


3.表格的边框

3.1 表格的边框厚度border

默认情况下border=0,这就意味着如果不显式的设置border的值,那么表格是没有边框的,一般情况下border的值不超过5

3.2 表格的边框颜色bordercolor

顾名思义,bordercolor就是设置边框的颜色,使用十六进制颜色值且border的值不能为0

3.3 内框宽度cellspacing

内框宽度可以类似的看做“田”里面的“十”,也即是指内部单元格之间的间隔

3.4 文字与边框间隔cellpadding

默认情况下,文字是与表格边框紧贴着的,那么通过设置这个就可以自由操控文字与边框的间隔


4.表格背景

4.1 表格背景颜色bgcolor

bgcolor是针对整个表格设置的,但是会被行、单元格的属性覆盖,相应的,行的属性会被单元格的属性覆盖

4.2 表格的背景图像background

background的值可以是图像的绝对地址或者相对地址


5.表格行属性

行属性包括height、align、valign、bordercolor、bgcolor、background

这些都与上面讲述的使用方式一样,需要说明的是align(水平)、valign(垂直)是指行文字的对齐方式


6.单元格属性

单元格属性包括width、height、align、valign、colspan、rowspan、bgcolor、background、bordercolorlight、bordercolordark

同行属性和表格属性所讲述的一样,需要说明的事colspan(水平)、rowspan(垂直)是指对应方向的跨度(也即单元格合并);

另外bordercolorlight(亮)、bordercolordark(暗)的值是颜色,用以设置亮边框和暗边框的颜色,以得到突出显示的效果;


7.表格的结构

表首标记thead、表主体标记tbody、表结尾标记tfoot

使用这种结构的意义在于能够整体操控一整块,能方便效果的总体设计;

需要注意的是,这三个结构标记只能在表格里面出现一次;

一般情况下我们用以设置bgcolor、align

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值