什么是table表格？html中table表格的介绍

什么是表格？表格是由行和列排列而成的一种结构，按照行和列呈现数据，从而进行页面布局。这种布局方式已经过时。建议使用p+css实现页面布局。

如何创建HTML表格：HTML表格由table标签、caption标签以及一个或多个tr、th或td标签组成：

1、table标签用来定义表格，整个表格包含在 table 和 /table 标签中；

2、caption标签定义表格标题；

3、tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由 tr 和 /tr 标签表示；

4、td标签和th标签用来定义单元格，所有单元格都在tr标签内，每个单元格由一对 td 和 /td 标签或一对 th 和 /th 标签表示，具体的表格内容放置在这一对td标签或th标签之中，其语法如下：

 table  caption 表格标题 /caption  th 1行1列的内容 /th  th 1行2列的内容 /th  /tr  td 2行1列的内容 /td  td 2行2列的内容 /td  /tr  /table 

注：th和td的不同：th默认是以粗体和居中的方式呈现于单元格。

table的一些常用标签属性

1、border标签属性：设定表格边框的宽度（单位：px）；border属性会为每个单元格添加边框，并用边框围绕表格；如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化，表格内部的边框则是1像素宽；建议使用border样式属性设置边框，不要使用border标签属性设置边框，

2、width标签属性：设定表格的宽度，建议使用width样式属性设置表格宽度，不要使用width标签属性设置，该标签属性有多个值：

值
设置以包含元素的百分比计的宽度（例子：width= 50% ）。

3、align标签属性：指定表格相对于周围标签的对齐方式，建议使用float样式属性实现该效果，该标签属性有多个值：

值
居中对齐表格。

4、bgcolor标签属性：指定表格背景颜色，建议使用background-color样式属性实现该效果，该标签属性有多个值：

值
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0) ）。

5、cellpadding标签属性：设定单元格边界与单元格内容之间的间距（单位：px），建议使用padding样式属性实现对其效果

6、cellspacing标签属性：指定单元格之间的间距（单位：px）

以上列出了table标签常用的标签属性，除此之外table标签还有frame、rules和summary三个标签属性，但因为frame和rules在Internet Explorer浏览器中不支持此属性，而summary标签属性不会再浏览器中产生任何视觉效果，所以这三个标签属性忽略不讲。

tr标签属性

1、align标签属性：设置表格行中单元格内容的水平对齐方式，该标签属性有多个值：

left
将内容对准指定字符。注：浏览器不支持该标签属性值

2、bgcolor标签属性：设定表格行的背景颜色，建议使用background-color样式属性实现该效果，该标签属性有多个值：

值
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0) ）。

3、valign标签属性：设置表格行中单元格内容的垂直对齐方式，该标签属性有多个值：

值
与基线对齐。

th和td标签属性

1、align标签属性：设置单元格内容的水平对齐方式，该标签属性有多个值：

值
将内容对准指定字符。注：浏览器不支持该标签属性值

2、bgcolor标签属性：设定单元格背景颜色，建议使用background-color样式属性实现该效果，该标签属性有多个值：

值
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0) ）。

3、valign标签属性：设置单元格内容的垂直对齐方式，该标签属性有多个值：

top
与基线对齐。

4、width标签属性与height标签属性：设定单元格的宽度和高度，建议使用width样式属性和height样式属性设置单元格宽度和高度，不要使用width标签属性和height标签属性设置，该标签属性有多个值：

值
以包含元素百分比计的宽度或高度值（比如 20% ）。

5、nowrap标签属性：设定单元格的内容是否换行

6、colspan标签属性和rowspan标签属性：分别设定单元格横跨的列数和横跨的行数

相关推荐：

html small标签是什么意思？small标签的使用方法实例

以上就是什么是table表格？html中table表格的介绍的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。