HTML之Table表单的属性以及用法

一、表格的常用属性

（1）table的常用属性

1.width、height 定义表格的长和宽

2.align 是整个表格相对于父元素的对齐方式

3.border 整个表格外围的的边界宽度

4.cellspacing 单元格外边距，即单元格之间的间距默认不为0

5.cellpadding 单元格内边距，即单元格中的内容与边界的距离

6.bgcolor 背景颜色

（2）tr标签的常用属性

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

2.valign 改行的内容，垂直对齐方式

3.bgcolor 每行的背景颜色

（3）td标签的常用属性

1.width

2.height

3.align

4.valign

5.bgcolor

6.colspan 合并水平单元格

7.rowspan 合并垂直单元格

（4）th标签该标签的作用和td差不多，不同的是该标签中的内容是列的标题

（5）caption标签该标签的作用就是给表格设置题目直接使用<caption>标题名称</caption>

（6）thead标签表头

（7）tbody 表主题

（8）tfoot 表尾

ps：可以将表格整体分为三部分thead、tbody、tfoot，如果使用时不加以使用，则默认表格内容都在tbody该部分中

二、使用--------至多一个菜谱

<table align="center" width=400px cellspacing=0 cellpadding=3 border=1 height=180px>
<tr align="center"><td colspan=3>星期一菜谱</td></tr>
<tr align="center"><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒土豆</td></tr>
<tr align="center"><td>小葱豆腐</td><td>炒白菜</td></tr>
<tr align="center"><td rowspan=2>荤菜</td><td>鱼香肉丝</td><td>油焖大虾</td></tr>
<tr align="center"><td>海参鲍鱼</td><td>宫保鸡丁</td></tr>
</table>

说明：

table标签里面的属性：创建一个高为180，宽为400，边界线大小为1，表内单元格间的间距为0，单元格和单元格内部的内容的间距为3的一个表格，并且表格相对于父元素居中对齐

tr标签的属性：每行数据内容都居中对齐

td标签的属性：colspan=3该属性可以使得该单元格占用原来水平三个单元格的大小位置，rowspan=2该属性可以使得该单元格占用原来垂直单元格俩个位置大小

效果图：

ps：1.如果不设置是表格整个的高度，，那每行数据上下之间显得挤压，因为不设置就是自适应，只要把内容正好显示出来，当然要想改变行高也不止改变表格高度这个唯一方法，还有很多方法，只是在则例说一下自适应的问题

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/JavaWeb_Hao/article/details/79722037
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-04-11 13:11:14
阅读 ( 505 )
分类：前端

HTML之Table表单的属性以及用法

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看