表格的基本设置
表格
在web的历史种,HTML的表格发挥了极大的作用,最初创建表格就是为了以表格形式显示数据,后来表格变成了一个极受欢迎的布局工具
但是又了CSS以后,CSS在布局网页方面实际上会更出色,所以现在我们使用表格的作用只有一个,就是用来表示格式化的数据
HTML中的表格可以很复杂,但是通常情况下我们不需要创建过于复杂的表格
table、tr、th、td
使用table标签创建一个表格
tr表示表格中的一行
tr中可以编写一个或多个th或td
th表示表头
td表示表格中的一个单元格
caption、thead、tbody、tfoot
caption表示表格的标题
thead表示表格的头部
tbody表示表格的主题
tfoot表示表格的底部
有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部
在HTML中为我们提供了三个标签:
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中
thead中的内容,永远会显示在表格的头部
tfoot中的内容,永远都会显示表格的底部
tbody中的内容,永远都会显示表格的中间
如果表格中没有写tbody,浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
合并单元格
合并的那远哥指将两个或两个以上的的那远哥合并为一个的那远哥
合并单元格可以通过在th或td中设置属性来完成
横向合并 -colspan
纵向合并 -rowspan
以前表格更多的情况实际上是用来对页面进行布局的,但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套,可以在td中在放置一个表格