美文网首页
表格、表格样式、长表格、表格的布局、表单

表格、表格样式、长表格、表格的布局、表单

作者: 栀心_d553 | 来源:发表于2019-12-18 22:55 被阅读0次

    使用table标签来创建一个表格

    在table标签中使用tr来表示表格中的一行,有几行就有几对tr

    在tr中需要使用td来创建一个单元格,有几个单元格就有几个td

    rowspan用来设置纵向的合并单元格
    colspan横向的合并单元格


    表格样式

    table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离

    可以使用th标签来表示表头中的内容,

            它的用法和td一样,不同的是它会有一些默认效果
    

    border-collapse可以用来设置表格的边框合并

            如果设置了边框合并,则border-spacing自动失效
    

    长表格

    有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部
    在HTML中为我们提供了三个标签:
    thead 表头
    tbody 表格主体
    tfoot 表格底部

        这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中
            
        thead中的内容,永远会显示在表格的头部
        tfoot中的内容,永远都会显示表格的底部
        tbody中的内容,永远都会显示表格的中间
        
        如果表格中没有写tbody,浏览器会自动在表格中添加tbody
        并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素
        通过table > tr 无法选中行 需要通过tbody > tr
    

    表格的布局

    表格的列数由td最多的那行决定
    表格是可以嵌套,可以在td中在放置一个表格


    表单

    相关文章

      网友评论

          本文标题:表格、表格样式、长表格、表格的布局、表单

          本文链接:https://www.haomeiwen.com/subject/puuynctx.html