表格

创建表格

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

表格是用于排列内容的最佳手段,在HTML页面中,绝大多数页面都是使用表格进行排版的。

表格标记
标记描述
<table>...</table>表格标记
<tr>...</tr>行标记
<td>...</td>单元格标记
其中表格标记<table>...</table>,表格的其他各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。

<table>

<tr>

<td>单元格内的文字</td>

<td>单元格内的文字</td>

......

</tr>

<tr>

<td>单元格内的文字</td>

<td>单元格内的文字</td>

......

</tr>

......

</table>

说明:<table></table>标志着一个表格的开始和结束

<tr></tr>表示表格中一行的开始和结束,包含几组<tr></tr>,就表示该表格有几行

<td></td>表示一个单元格的起始和结束,(一行中包含了几列)。

表格的标题:caption

<caption>表格的标题</caption>

表格的表头:th

表格中还有一种特殊的单元格,称为表头。一般位于表格的第一行,用来表明该列的内容类别,用<th></th>标记来表示。与<td>标记的使用方法相同,但是<th>标记中的内容是加粗显示的。

设置表格基本属性

表格的宽度:width

默认情况下,表格的宽度是根据内容自动调整的,用户也可以手动设置表格的宽度。

<table width="表格宽度">

表格宽度的值可以是具体的像素数,也可以设置为浏览器的百分比数。

表格的高度:height

<table height="表格高度">

表格的对齐方式:align

<table align="表格对齐方式">

align参数可以取值为left,center,right。

设置表格的边框

表格边框的宽度:border

默认情况下,表格是不显示边框的。为了使表格更加清晰,可以使用border参数设置边框的宽度。

<table border="边框宽度">

单位为像素。

表格边框的颜色:bordercolor

默认是灰色的。设置边框颜色的前提是border不为0。

<table border="边框宽度" bordercolor=“边框颜色”>

表格内框的宽度:cellspacing

是指表格内部各个单元格之间的宽度。

<table cellspacing="内框宽度">

表格内文字与边框的间距:cellpadding

默认情况下,表格内的文字会紧贴着表格的边框,这样看上去非常拥挤。可以使用cellpadding参数来调整。

<table cellpadding="文字与边框的距离">

设置表格背景

表格背景的颜色:bgcolor

<table bgcolor="颜色代码">

表格的背景图像:background

<table background="背景图像的地址">

设置表格的行属性

高度的控制:height

在网页中常常遇到一些表格中某一行高度和其他行不同的情况,这就需要使用height参数进行相应设置。

<tr height="表格中某行高度">

这一参数只对设置的这一行有效。

行的边框颜色:bordercolor

单独设置某行颜色

<tr bordercolor="颜色代码">

行的背景颜色:bgcolor

<tr bgcolor="颜色代码">

行文字的水平对齐方式:align

为某一行单独设置特殊水平对齐方式。

<tr align="水平对齐方式">

3种,left,center,right。

行文字的垂直对齐方式:valign

为某一行单独设置特殊垂直对齐方式。

<tr valign="水平对齐方式">

3种,top,middle,bottom。

表格标题的垂直对齐方式:align

<caption align="垂直对齐方式">表格的标题</caption>

垂直对齐方式的值可以取top或bottom。取值为top,是将标题文字设置在表格的上方;取值为bottom,是将标题文字设置在表格下方。

调整单元格属性

单元格大小:width、height

<td width="单元格宽度" height="单元格高度">

单元格水平跨度:colspan

是指在复杂的表格结构中,有些单元格是跨多个列的。

<td colspan=“跨的列数”>

单元格垂直跨度:rowspan

<td rowspan=“跨的行数”>

单元格对齐方式:align、align

设置单元格的对齐方式与设置行的对齐方式方法相似。

<td align=“水平对齐方式” valign=“垂直对齐方式”>

单元格的背景色:bgcolor

单元格的边框颜色:bordercolor

单元格的亮边框:bordercolorlight

单元格的暗边框:bordercolordark

单元格的背景图像:background

表格的结构

表格的表头标记:thead

表头样式的开始标记是<thead>,结束标记是</thead>,其中可以设置背景颜色、文字的水平对齐方式、文字的垂直对齐方式等。

<thead bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式">

......

</thead>

说明:在<thrad>标记内还可以包含<td>、<th>和<tr>标记,而一个表元素只能有一个<thead>

表格的表主体标记:tbody

与表头样式的标记功能类似,表主题样式用来统一设计表主体部分的样式,标记为<tbody>。

<tbody bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式">

......

</tbody>

说明:一个表元素中只能有一个<tbody>标记。

表格的表尾标记:tfoot

<tfoot>标记用于自定义表尾样式。

<tfoot bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式">

说明:一个表元素中只能有一个<tfoot>标记。


表格的嵌套





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值