HTML标记语法之表格元素

时间:2022-07-19 22:06:38
语法与语义:   <table>和</table>定义表格的开始和结束   <thead>和</thead>定义表格头部的开始和结束   <tbody>和</tbody>定义表格主体开始和结束   <tfoot>和</tfoot>定义表格脚注的开始和结束   <tr>和</tr>定义表行的开始和结束   <td>和</td>定义表列(单元格)的开始和结束   <th></th>定义标题栏,和<td>级别相同(文字加粗、居中)。 1.table的属性集
属性 作用
bgcolor 设置表格背景色
background 设置表格背景图片
border 设置边框宽度,默认为0
cellpadding 设置单元格与内容之间的距离,默认值为2
cellspacing 设置单元格之间的距离,默认值为2
bodercolor 设置边框颜色
bodercolorlight 置边框亮部分的颜色(boder大于等于1时有效)
bodercolordark 设置边框暗部分的颜色(boder大于等于1时才有效)
align 设置表格对齐格式(left、center、right)
width 设置表格宽度,单位用绝对像素和百分比
height 设置表格高度,单位用绝对像素和百分比
2.tr的属性集
属性 作用
width 设置行宽度
height 设置行高度
bgcolor 设置行的背景颜色
align 设置水平对齐方式(left/right/center)
valign 设置行垂直对齐方式(top、middle、bottom)
3.td的属性集
属性 作用
width 设置单元格宽度
height 设置单元格高度
bgcolor 设置单元格的背景颜色
background background
align 设置水平对齐方式(left/right/center)
valign 设置行垂直对齐方式(top、middle、bottom)
rowspan 设置行合并数目
colspan 设置列合并数目
nowarp 设置在单元格中不换行

4.立体表格实现原理

    表格的亮边框和暗边框颜色进行对比。

5.细线表格效果的实现原理

    1.将表格的boder设为0.

    2.给表格设置背景颜色为细线颜色

    3.給表格设置单元格背景为白色

    4.給表格设置单元格之间的距离为细线宽度

6.table的边框设置及其效果

属性名称 属性值 说明

frame(border>0)

       
void 不显现表格的边线
above 只显现表格上边线
below 只显现表格下边线
hsides 只显现表格上下边线
vsides 只显现表格左右边线
lhs 只显现表格的左边线
vhs 只显现表格的右边线
border/box 显现表格的所有边线
rules     rows 只显示横行的格框线
cols 只显示直行的格框线
all 显示所有的格框线
groups 表示列组合水平部分
none 不显示任何格框线

7.表格结构化格式

  <table>

    <thead>表头区</thead>

    <tbody>表体区</tbody>

    <tfoot>表尾区</tfoot>

  </table>

8.直列化格式:<colgroup><colgroup><col><colgroup>的功能完全一样)

 

属性名称

属性值

说明

          align

left

靠左

center

靠中

right

靠右

     valign

top

靠上

middle

靠中

bottom

靠下

span

数字

直列数

bgcolor

颜色

背景颜色

  

  例如:想把一个表格的第n列的颜色改变,可以这样做:

    <colgroup span=”n-1”></colgroup>        

    <colgroup bgcolor=”你想的颜色”></colgroup>

9.表格的标题:

  <table>

    <caption>标题名</caption>

  </table>

 

属性名称

属性值

说明

align

top

标题在表格上方

bottom

标题在表格下方

left

标题在表格左方

right

标题在表格右方