css表格的制作(table缺点)

css总结 专栏收录该内容
10 篇文章 0 订阅

1、表格标签:

定义表格:<table>
表格标题:<caption>
表格表头:<thead>
表格正文:<tbody>
表格页脚:<tfoot>
表头单元格:<th>
表格行:<tr>
表格单元格:<td>

2、表格属性和样式:

表格对其方式:align(左中右)
表格边框宽度:border
表格边框颜色:bordercolor
表格背景色:bgcolor
表格背景图:background
单元间间隙:cellspacing
表格内边距:cellpadding
横向合并单元格(td属性):colspan=“2”
纵向合并单元格(td属性):rowspan="2"

合并相邻单元格边框(table样式):border-collapse:collapse;

例子:
html:

 <table border="1" bordercolor="red" bgcolor="#ccc" 
    cellpadding="0" cellspacing="0" background="弹性盒模型项目主轴空间.png
    ">
        <caption>成绩单</caption> <!--表格的标题-->
        <thead>
            <th>模电</th>
            <th>数电</th>
            <th>信号</th> <!-- th内的字体是默认加粗的 -->
        </thead> <!-- 可以没有或只有唯一一个 -->
        <tbody>
            <tr>
                <td colspan="2">70</td> <!--水平合并2个格子-->
                <td rowspan="3">75</td> <!-- 垂直合并3个格子-->
            </tr>
            <tr>
                <td>80</td>
                <td>90</td>
            </tr>
            <tr>
                <td>75</td>
                <td>80</td>
            </tr>
        </tbody> <!-- 必须有,可有多个tbody -->
        <tfoot></tfoot> <!-- 可以没有或只有唯一一个-->
        </table>

css:

table{
       border-collapse: collapse; /* 合并相邻单元格边框 */
    }
    th{
        width: 200px;
    }
    th,td{
        height: 60px;
        text-align: center;/* 文字垂直居中 */
    }

结果:
在这里插入图片描述

3、table的缺点

在很早以前,很多页面是使用table布局出来的,随着css功能越来越强大,早以不再使用它们来做布局了,table在布局时也可以拥有漂亮的颜值,但却有以下的缺点:

1、 太深的嵌套,比如table>tbody>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了代码量
2、 灵活性差,比如要将tr设置border等属性,是不行的,得通过td 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
3、混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱
4、table需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间
5、不够语义,无论是计算机还是阅读代码的人在阅读时都觉得非常困难

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值