<table> - 表格

首页 > HTML标签 > <table>

■ 摘要

项目说明
形式<table>~</table>
支持H3+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
标签省略开始标签:必须,结束标签:必须
可包含元素caption / col / colgroup / thead / tbody / tfoot
(直接写 tr 的话,浏览器会认为省略了 <tbody> 标签。)

■ 说明

<tr><th><td> 组合可以用来作成表格。

■ 属性

【边框相关属性】
属性意义
border=nH3+/e2+/N2+。指定边框线的粗细。当不记述此属性,或者把值设定为 0 的时候,边框线不显示。边框线的粗细在 HTML5 里只能设定为 1,更粗的边框线要使用样式表来实现。
bordercolor=colore2+/N4+。指定边框线的颜色。
bordercolordark=colore2+。指定立体边框线的阴暗部分的颜色。
bordercolorlight=colore2+。指定立体边框线的明亮部分的颜色。
frame=frameH4/e3+。控制各个单元格的外侧边框线是否显示。HTML5 中被废弃。
  void:不显示。(默认值)
  above:上方。
  below:下方。
  hsides:上下两边。
  vsides:左右两边。
  lhs:左侧(Left Hand Side)。
  rhs:右侧(Right Hand Side)。
  box:上下左右。
  border:上下左右。
rules=rulesH4/e3+。控制各个单元格的内侧边框线是否显示。HTML5 中被废弃。
  none:不显示。
  groups:用 <thead>, <tbody>, <tfoot> 标签指定的组之间。
  rows:行之间。
  cols:列之间。
  all:行和列之间。(默认值)

【背景相关属性】
属性意义
background=urle3+/N4+。指定背景图片。在 <tr>, <th>, <td> 里也可以指定。
bgcolor=colorH4T/e2+/N3+。指定背景色。在 <tr>, <th>, <td> 里也可以指定。

【配置相关属性】
属性意义
align=alignH3-H4T/e2+/N2+。指定表格相对周围元素的对齐方式。
  center:居中(H3/e2/N4)
  left:居左(H2/e2/N2)(默认值)
  right:居右(H2/e2/N2)
cellpadding=nH3-H4/e2+/N2+。指定单元格边缘与其内容之间的空白。
cellspacing=nH3-H4/e2+/N2+。指定单元格之间的空白。设定为 0 的时候,可以显示没有立体感的边框线。
height=ne2+/N2+。指定表格的高度。
hspace=nN2+。指定表格周围的横向的空白。
vspace=nN2+。指定表格周围的纵向的空白。
width=nH3-H4/e2+/N2+。指定表格的宽度。

【其他属性】
属性意义
cols=ne3+/N4+。指定表格的列数。使用这个属性的时候,表格的显示速度有可能会稍微快一点。
datapagesize=sizee4+。使用数据绑定功能时,指定绑定到数据源的表格中显示的记录数。
datasrc=datasrce4+。使用数据绑定功能时,指定数据源的 ID。
summary=summaryH4。为有声阅读浏览器提供此表格的内容说明。HTML4.01 中是必须属性, HTML5 中被废弃。

【一般属性】
属性意义
class=classH4+/e3+/N4+。指定类。
id=idH4+/e3+/N4+。指定ID。
style=styleH4+/e3+/N4+。指定样式。
title=titleH4+/e4+/N6+。指定标题。
dir=dirH4+/e5+/N6+。指定文字显示的方向。
lang=langH4+/e4+/N6+。指定语言种类。
accesskey=keyH5+。指定快捷键。
tabindex=nH5+。指定TAB键在控件中的移动顺序。
contenteditable=boolH5+/e55+。使元素可编辑。
contextmenu=idH5+。指定contextmenu。
draggable=boolH5+。可拖动。
dropzone=valueH5+。可拖放。
hiddenH5+。隐藏元素。
spellcheck=boolH5+。检查拼写。
IE扩展属性可以指定IE扩展属性。

■ 举例

HTML代码
<table border=4 width=250 align=center>
 <caption>【表格举例】</caption>
 <tr bgcolor="#cccccc">
  <th><br></th>
  <th>列-A</th>
  <th>列-B</th>
  <th>列-C</th>
 </tr>
 <tr align=center>
  <td>行-1</td>
  <td>A1</td>
  <td>B1</td>
  <td rowspan=2>C1-C2</td>
 </tr>
 <tr align=center>
  <td>行-2</td>
  <td>A2</td>
  <td>B2</td>
 </tr>
 <tr align=center>
  <td>行-3</td>
  <td>A3</td>
  <td colspan=2>A3-B3</td>
 </tr>
</table>

浏览器显示效果
【表格举例】

列-A 列-B 列-C
行-1 A1 B1 C1-C2
行-2 A2 B2
行-3 A3 A3-B3

■ 连接单元格

在 <th> 或 <td> 里指定 colspan=3 的话,会连接横向3个单元格。指定 rowspan=3 的话,会连接纵向3个单元格。

■ 空单元格

如果一个单元格里什么内容都没有,像 <td></td> 这样写的话,在有些浏览器里会看不到边框,如果想避免此情况只要写成 <td><br></td> 就可以了。

AAAAABBBBB
CCCCC
AAAAABBBBB
CCCCC

■ 使表格横向排列

想让表格横向排列的时候,可以把表格嵌套在没有边框的表格内显示。

<table>
 <tr>
  <td><table border=1>~</table></td>
  <td><table border=1>~</table></td>
 </tr>
</table>

■ 消除单元格之间的空白

诸如在表格里插入图片,想让单元格之间没有空白的时候,可以在 <table> 标签里指定 border=0 cellspacing=0 cellpadding=0,并且不能在 <td>~</td> 里插入空格和换行。否则在有些浏览器里图片间会有空白。

■ 使边框线变细

用 cellspacing 和 cellpadding,或者使用背景色不同的表格的嵌套,可以使表格的边框线看起来更细一点。

AAABBB
CCCDDD
AAABBB
CCCDDD
AAABBB
CCCDDD
<table
border=1
>
<table
border=1
cellspacing=0
cellpadding=2
>
代码如下
<table border=0 bgcolor="#000000" cellspacing=0 cellpadding=0>
 <tr>
  <td>
   <table border=0 cellspacing=1 cellpadding=3>
    <tr bgcolor="#FFFFFF"><td>AAA</td><td>BBB</td></tr>
    <tr bgcolor="#FFFFFF"><td>CCC</td><td>DDD</td></tr>
   </table>
  </td>
 </tr>
</table>

■ 相关

<tr><th><td>