html中table表格的属性的使用

html中table表格的属性是怎么使用的？其实很简单，下面我们以几个典型的属性来说明一下。

01

首先是colspan属性，这是合并单元格的，一般一个表格的每一行的单元格数目都是一致的，但可以使用这个属性来为任意一行合并某些单元格，下方的代码就是为第一行合并3个单元格，从而让这一行只有一个单元格的。

02

另一个是bgcolor属性，这是设置每一行或，每一个单元格的背景颜色的，如果要设置漂亮的表格，我们可以使用这个背景属性来让表格更有色彩。

03

align属性可以让我们的单元格内容进行对齐，有左对齐，居中对齐和右对齐。这个可以让文本显示更加有条理。

04

看下应用的效果，可以看到现在的表格显示有条有理了，灵活应用这些表格属性，可以让我们做出各式各样的表格来。

HTML网站表格的属性设置可以分为以下几条属性：

从很大程度上来说，HTML/XHTML浏览器都使用同样的属性来显示表格内容，这些属性控制着常规内容的显示。但是，在表格中会有一些特殊情况。要使作者得以更好地控制这些项，CSS添加了几个特定于表格的属性。但是现在流行的浏览器都还不支持这些属性。下面开始介绍：

在表格内的单元格边方面，有两种有分歧的意见。第一种观点认为每个单元格都是具有惟一边框的独立实体。另一种观点则认为相邻的单元格共享边框的边，改变一个单元格中的边框会影响其相邻的单元格。

为了使建设网站人员可以得到最大的控制权，CSS提供了border-collapse属笥，它允许我们选择适合自己样式的模型。默认情况下，这个属性的值为collapse，其含义是相邻单元格共享他们的边框样式。换句话说，可以将border-collapse属性设置为separate，这样就扩大了表格，因此边框可以被单独显示，并清楚的围绕在每个单元格周围。

如果选择的是separate样式，还可以使用border-spacing属性来设置相邻边框之间的间距。默认边框间距为0，这意味着相邻的单元格边框彼此相接，但是有些浏览器还是可能使用不同的默认值，增加该值后，可以使浏览器在边框之间插入额外的空间，这就允许表格的背景颜色或图像可以显示出来。如果只提供了两个值，第一值设置水平间距，第二个值确定垂直间距。

在separate样式中，还可以控制边框围绕着单元格绘制的方式。默认情况下，边框会围绕着一个表格内的所有单元格进行绘制，即使其中并没有内容。将empty-cells属性从其默认值show切换为hide,便可以改变这种状况。在设置属性时，空的单元格仅仅会显示表格背景。如果整行单元格都是空的，浏览器会从表格实体中去除行。

表格caption-side属性：

仅在<caption>元素中使用caption-side属性。它接受top、bottom、left或right值，并告诉浏览器在何处放置与其相关联表格相邻的标题。与<caption>标签依赖于浏览器的align属性相比，caption-side属性在放置标题方面提供了更为一致方法。流行浏览器还都不支持caption-side，但是不管怎么样，还是应该在将来的版本中包括这个属性。

表格speak-header属性：

能够播放音频的浏览器可以通过检索目录为用户提供很浏览方式。一种非常简单的途径就是让浏览器会根据它们各自的标题将目录组织起来，并以更易理解的方式读取的是哪个单元格。

speak-header属性为浏览器标识表格中的单元格（集合）提供了两种方式。如果指定了once(默认值)，浏览器在读取每个单元格相关联的数据单元格之前，只读取一次标题单元格的内容。通过这种方式，用户在移过一行单元格时，就会听到该行中第一个单元格的行标题和列标题，但是只有须移到该行中随后的单元格中时，才会听到变化的列标题。

如果将speak-header属性设置为always，浏览器会以读取单元格相关联的标题为+开始，来读取每个单元格的内容。已经证明，这点对于复杂表格来说，或者是在标题值

使得理解表格内容更为容易一些的地方（尤其是表格仅包含数字的情况下）都很有用处。

请注意，仅在知道哪个标题单元格与数据单元格相关联的时候，浏览器才会把标题念出来，这时候认真的程序猿们会在他们的表格单元格中使用header属性，以此指定与表格中的每个数据单元格相关的标题单元格。

表格table-layout属性：

表格布局对于任何浏览器来说都是一项艰巨的任务。为了创建具有吸引力的表格，浏览器必须找出每一列中最宽的单元格，将该列调整为适应那个宽度，然后将整个表格调整为适应所有的列。对于大型表格来说，当浏览器在处理多个表格时，文档显示可能会显著地慢下来，以便正确显示表格。

使用table-layout属性对这个过程会有所帮助。如果将属性设置为fixed，浏览器会根据表格中第一行的宽度确定列宽。如果显示方式设置了列宽，将表格的table-layout属性设置为fixed，表格的显示过程会明显加快，从而使用户在查看这些文档时增强自己的体验。

默认情况下，table-layout属性设置为auto，这就迫使浏览器使用更为耗费时间的多程算法，即使指定了表格中的列宽也无济于事。如果表格内容有变，而且你无法设置列宽，便可以将table-layout属性设置为auto。如果可以固定列宽，而且表格内容不变，可以将table-layout属性设置为fixed。

---