html中<table>标签如何使用-创新互联

小编给大家分享一下html中<table>标签如何使用，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、虚拟空间、营销软件、网站建设、香坊网站维护、网站推广。

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

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

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

我们如何使用table表格：

定义表格：<table></table>

创建表行：<tr></tr>

创建列(单元格):<td></td>

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

table : display:table;

html table表格的特点：

1.独占一行

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

html table的表格属性：

1、<table> 属性

1.width：设置表格宽度

2.height：设置表格高度

3.align：设置表格在其父元素中的水平对齐方式，取值：left,center,right

4.border：边框,边框宽度，以px为单位的数值，px可以省略

5.cellpadding

单元格内边距

单元格边框与内容之间的距离

6.cellspacing

单元格外边距

单元格与单元格之间或者单元格与表格之间的距离

7.bgcolor：背景颜色

2、table中的<tr> 属性

1.align：该行的内容水平对齐方式

2.valign

该行的内容垂直对齐方式

取值：top，middle，bottom

3.bgcolor

3、table中的<td> 属性

width
height
align
valign
bgcolor
colspan：设置单元格跨列
rowspan：设置单元格跨行

还有表格中的其他标记：

1、<caption></caption>

作用：为表格定义标题

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

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

2、行标题或列标题

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

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

行(列)标题:<th></th>

3、表格的复杂应用

1、行分组

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

1、表头 <thead></thead>

2、表主体 <tbody></tbody>

3、表尾 <tfoot></tfoot>

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

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

2、不规则表格

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

1.跨列

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

语法：td 的 colspan 属性

2.跨行

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

语法：td 的 rowspan 属性

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

3、表格的嵌套

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

被嵌套的表格必须出现在<td>中

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

html table表格特有的样式属性

1、html table表格样式属性之边框合并

属性：border-collapse

取值：

1.separate：默认值，分离边框模式

1.collapse：边框合并模式

2、html table表格样式属性之边框边距

1.作用：设置相邻单元格边框之间的距离(类似于cellspacing)

2.属性：border-spacing

取值：

1、取1个值

表示水平和垂直间距相等

2.取2个值

第一个值表示的水平间距

第二个值表示的垂直间距

两个值之间用空格隔开

3.要求

border-collapse必须为separate

必须为分离边框模式时有效

3、html table表格样式属性之标题位置

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

属性：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

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

看完了这篇文章，相信你对html中<table>标签如何使用有了一定的了解，想了解更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道，感谢各位的阅读！

网站栏目：html中<table>标签如何使用-创新互联
浏览路径：https://www.cdcxhl.com/article4/ddijie.html

成都网站建设公司_创新互联，为您提供微信公众号、网站导航、Google、微信小程序、用户体验、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容

html中&lt;table&gt;标签如何使用-创新互联

html中<table>标签如何使用-创新互联