HTML标记语法之表格元素

语法与语义:

  <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

标题在表格右方

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

表格案例

13820
来自专栏web

各种水平垂直居中

9010
来自专栏木子昭的博客

css布局-实现左中右布局的5种方式

? <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

38480
来自专栏Java后端技术

让div等块级元素水平以及垂直居中的解决办法

  我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让d...

10620
来自专栏前端技术总结

CSS自定义滚动条的样式

本文会介绍CSS滚动条选择器,并在演示中展示如何在Webkit的内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。

2.2K680
来自专栏一个小程序员的成长笔记

CSS3弹性盒布局

使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。 1 <!DOCTYPE html> 2 <html la...

56670
来自专栏小壮和前端

键盘事件 和键码

19710
来自专栏从零开始的linux

mongodb分片

分别在三台机器上面创建 mkdir -pv /data/mongodb/mongos/log mkdir -pv /data/mongodb/config/{d...

47740
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何设置页面的title

其中包括Image属性(窗体图标)、BackColor属性(窗口标题栏背景色)、TextColor属性(窗口标题栏文本颜色)和TextAlign属性(窗体标题栏...

10150
来自专栏一“技”之长

标签之美四——为网页添加绚丽多彩的图像 原

这里图片路径的写法和本地超链接的写法是一样的,可以参考上一篇博客中关于本地路径的地方:http://my.oschina.net/u/2340880/blog/...

10230

扫码关注云+社区

领取腾讯云代金券