首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML标记语法之表格元素

HTML标记语法之表格元素

作者头像
阿豪聊干货
发布2018-08-09 15:02:16
2.2K0
发布2018-08-09 15:02:16
举报
文章被收录于专栏:Java后端技术Java后端技术

语法与语义:

  <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

标题在表格右方

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-02-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档