html table表格是什么？<table>标签中各种属性的使用方法

html table表格是什么？

首先让我们了解什么是表格，还有表格的作用

什么是table表格：由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列到一起组成的

table表格的作用：以一定的结构来显示信息的。 

我们如何使用table表格：

定义表格：

创建表行：

创建列(单元格):

注意：默认情况下，每行中的列数是统一的。

table : display:table;

html table表格的特点：

1.独占一行

2.宽度自适应(由内容来决定) 

html table的表格属性：

1、

        作用：为表格定义标题

        位置：表格正上方居中显示

<table>
    <caption>标题</caption>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

2、行标题或列标题

    列标题：第一行中的每一列，加粗，水平居中的效果显示

    行标题：每行里面的第一列, 加粗，水平居中的效果显示

    行(列)标题:

3、表格的复杂应用

1、行分组

表格可以被划分成3个部分

        1、表头

        2、表主体

        3、表尾     

<table>
    <tbody>
         <tr></tr>
         <tr></tr>
    </tbody>
</table>

注意：如果不对表格行进行分组的话，那么默认都属于 tbody 中

2、不规则表格

每行中的列数，不是统一化的。

1.跨列

    合并列，让指定的单元格，横向向右，合并几个单元格(包含自己)

语法：td 的 colspan 属性

2.跨行

合并行，让指定的单元格，纵向向下，合并几个单元格(包含自己)

语法：td 的 rowspan 属性

注意：无论是跨行还是跨列，被合并的单元格一定从代码中删除出去

3、表格的嵌套

     在一个表格中，又嵌入了另外一个表格

被嵌套的表格必须出现在

作用：将标题位置由默认的位置改到表格之下

属性：caption-side

取值：

      1、top：默认

      2、bottom：标题位于表格之下

4、html table表格样式属性之显示规则

1.作用

指定浏览器以什么样的方式来布局一个表格。实际是指定了单元格的算法规则

默认算法：单元格的宽由内容来决定，不受设置的width值来限定。

2.属性：table-layout

取值：

1、auto：默认值，自动，列宽由内容来决定

2、fixed：固定表格布局，列宽由设定的值决定。

3、自动表格布局&固定表格布局

  1.自动表格布局(auto)

    单元格的大小会适应内容大小

    在表格复杂时，加载会比较慢

    适用于不确定每列大小时使用

    传统表格表现方式

  2.固定表格布局(fixed)

    单元格的大小由设定的值来决定，与内容无关

    会加速显示表格，浏览器在加载完第一行的时候就不用再计算了。 

4、隐藏的显示效果

属性：  visibility:collapse

用在表格元素上，删除一行或一列，不影响表格整个布局

谢谢你看完了本篇文章，如果有什么疑问或者是什么关于这上面的问题你都可以在下面提问。

还有一篇是这个进阶版的文章，欢迎点击：html5 table标签的样式介绍（另附html5 table css居中的实例）

【小编的相关文章】

html em标签的作用是什么？和标签的区别

html optgroup标签是什么意思？关于html optgroup标签的用法和属性实例解析

<table>
    <tr>
       <td>
<table>
    <tr>
        <td>
        </td>
    </tr>
</table>
       </td>
    </tr>
</table>