[八]HTML+CSS基础(表格)

*** 一,创建一个表格:***使用table标签

  • tr表示表格中的一行。
  • tr中可以编写一个或多个th或td。
  • th表示表头。
  • td表示表格中的一个单元格。




    
    Document
    


    
ID 书名 作者
001 《解忧杂货铺》 东野圭吾
002 《时生》 东野圭吾
003 《祈祷落幕时》 东野圭吾
[八]HTML+CSS基础(表格)_第1张图片
table.png

二,合并单元格:合并单元格指将两个或两个以上的单元格合并为一个单元格。 合并单元格可以通过在th或td中设置属性来完成。

横向合并– colspan
纵向合并– rowspan





    
    Document
    


    
ID 书名 作者
001 《解忧杂货铺》 东野圭吾
002 《时生》
003 《祈祷落幕时》
[八]HTML+CSS基础(表格)_第2张图片
横纵向合并.png

三,表格的样式: 之前学习的很多属性都可以用来设置表格的样式,比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的距离。

  • text-align :设置文本的水平对齐。
  • vertical-align :设置文本的垂直对齐。
    • 可选值:top、baseline、middle、bottom
  • border-spacing :边框间距
  • border-collapse :合并边框 ,此属性设置了,border-spacing将失效
    • collapse :合并边框
    • separate :不合并边框




    
    Document
    


    
ID 书名 作者
001 《解忧杂货铺》 东野圭吾
002 《时生》
003 《祈祷落幕时》
[八]HTML+CSS基础(表格)_第3张图片
border-collapse.png

四,表格的实例:





    
    Document
    


    
ID 书名 作者
001 《解忧杂货铺》 东野圭吾
002 《时生》 东野圭吾
003 《祈祷落幕时》 东野圭吾
001 《解忧杂货铺》 东野圭吾
002 《时生》 东野圭吾
003 《祈祷落幕时》 东野圭吾
[八]HTML+CSS基础(表格)_第4张图片
隔行变色.png




    
    Document
    


    
ID 书名 作者
001 《解忧杂货铺》 东野圭吾
002 《时生》 东野圭吾
003 《祈祷落幕时》 东野圭吾
001 《解忧杂货铺》 东野圭吾
002 《时生》 东野圭吾
003 《祈祷落幕时》 东野圭吾
[八]HTML+CSS基础(表格)_第5张图片
移入变色.png

五,长表格:

  • caption表示表格的标题。
  • thead表示表格的头部。 其中的内容永远显示在表格上面
  • tbody表示表格的主体。 其中的内容永远显示在表格中间
  • tfoot表示表格的底部。其中的内容永远显示在表格底部

即使没有写tbody,浏览器也会默认添加的,所以使用table > tr的方法是不可以的,tr其实是tbody的儿子





    
    Document
    


    
ID 书名 作者
合计
001 《解忧杂货铺》 东野圭吾
002 《时生》 东野圭吾
003 《祈祷落幕时》 东野圭吾
004 《解忧杂货铺》 东野圭吾
005 《时生》 东野圭吾
006 《祈祷落幕时》 东野圭吾
007 《梦幻花》 东野圭吾
008 《白夜行》 东野圭吾
009 《恶意》 东野圭吾

你可能感兴趣的:([八]HTML+CSS基础(表格))