HTML中的TABLE标签

最近没事想写个小东西计算下自己的收益率。利用表格排版的时候,竟然发现好久不用的table标签忘得一干二净,真是汗颜。这会找找东西,好好整理下,以便自己忘记后可以更快的找到自己需要的。

定义和用法


标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

HTML 与 XHTML 之间的差异


在 HTML 4.01 中,table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD,table 元素的 "align" 和 "bgcolor" 属性是不被支持的。

可选的属性


属性 描述
align
  • left
  • center
  • right

不赞成使用。请使用样式代替。

如果用在table标签中,规定该表格相对于整个页面的布局。enter表示该表格在页面中居中显示;left表示该表格在页面中居左显示

bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式代替。

规定表格的背景颜色。

border pixels 规定表格边框的宽度。
如果没有边框,则border=0
cellpadding
  • pixels
  • %
规定单元边沿与其内容之间的空白。
cellspacing
  • pixels
  • %
规定单元格之间的空白。
frame
  • void
  • above
  • below
  • hsides
  • lhs
  • rhs
  • vsides
  • box
  • border
规定外侧边框的哪个部分是可见的。
rules
  • none
  • groups
  • rows
  • cols
  • all
规定内侧边框的哪个部分是可见的。
summary text 规定表格的摘要。
width
  • %
  • pixels
规定表格的宽度。

带标题和表头的表格


caption是表格标题,th是表头,tr是行,td是每行中的单元格

测试表格
姓名 电话 备注
Bill 555 555随便输入

垂直的表头:

姓名 Bill
电话 555
备注 555随便输入

实际显示效果:

HTML中的TABLE标签_第1张图片


合并行或是合并列


合并行在td或是th标签内用rowspan,合并列在td或是th标签内用colspan

文字描述 输入 备注
第一 第二 第三
合并两个单元格 最后一个单元格
合并两行 第二列 第三列
第二列。。 第三列。。
实际显示结果:

HTML中的TABLE标签_第2张图片


添加背景色或是背景图片

给表格添加背景色(table中用bgcolor)或是背景图片(table中用background)。


给某个单元格或是表头添加背景色(td或th中用bgcolor)或是背景图片(td或th中用background)。

First

表格中的其他标签以及对其方式

表格中的对齐方式可以约定行中的内容对齐或是单独对某个单元格中的对齐方式单独设定。可以使用align或使用样式中的text-align。

表格中td中可以填充其他的元素标签。如input,ul,table,div等等

测试表格
姓名 电话 备注
Bill 555 555随便输入
输入电话
实际显示结果如下:

HTML中的TABLE标签_第3张图片






你可能感兴趣的:(HTML)