快速了解table表格的属性,创建简易表格

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        table {
            margin: 0 auto;
            text-align: center;
        }
        th,
        td {
            padding: 10px 40px;
        }
    </style>
</head>

<body>
    <table border="1">
        <caption>
            <h1>2023年4月消费支出</h1>
        </caption>
        <thead>
            <th>银行卡余额</th>
            <th>水费</th>
            <th>电费</th>
            <th>网费</th>
            <th>银行卡余额</th>
        </thead>
        <tbody>
            <tr>
                <td>1000元</td>
                <td>100元</td>
                <td>20元</td>
                <td>45元</td>
                <td>835元</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

1. 需要创建一个表格,表格的基本标签至少要清楚

  1. <table> </table>
  2. <caption></caption>
  3. <thead></thead>
  4. <tbody></tbody>
  5. <tfoot></tfoot>
  6. <th></th>
  7. <tr></tr>
  8. <td></td>

      注意 : 想要创建一个简易的表格,只有 <table> <tr> <td> 是必要的,其他标签都是可选的,为了表格美观或功能性酌情添加

 2. 了解表格的标签的功能,有助于高效的创建表格

  1. <table> 存放表格内容的容器,所有的表格标签都要嵌套在<table>里
  2. <caption> 表格的标题,一般位于<table> 的第一个子元素,作用是可以在表格的上方书写一段表格的标题
  3. <thead> 表格的列头的行 
  4. <tbody> 表格的内容 
  5. <tfoot> 表格的汇总的行 
  6. <th> 表格的表头单元格,书写在<th>里的内容会有默认加粗的效果
  7.  <tr> 表格的行
  8. <td> 表格每行的单元格

 3. 美观表格的常用方法和属性

  1. 合并表格的列   colspan
    <table border="1">
        <caption>
            <h1>2023年4月消费支出</h1>
        </caption>
        <thead>
            <th>银行卡余额</th>
            <th>水费</th>
            <th>电费</th>
            <th>网费</th>
            <th>银行卡余额</th>
        </thead>
        <tbody>
            <tr>
                <td>1000元</td>
                <td colspan="3">165元</td>
                <td>835元</td>
            </tr>
        </tbody>
    </table>

        2.  合并表格的行 rowspan

    <table border="1">
        <caption>
            <h1>2023年4月消费支出</h1>
        </caption>
        <thead>
            <th></th>
            <th>银行卡余额</th>
            <th>水费</th>
            <th>电费</th>
            <th>网费</th>
            <th>银行卡余额</th>
        </thead>
        <tbody>
            <tr>
                <td>上半月</td>
                <td rowspan="2">1000元</td>
                <td>10元</td>
                <td>50元</td>
                <td>10元</td>
                <td rowspan="2">860元</td>
            </tr>
            <tr>
                <td>下半月</td>
                <td>10元</td>
                <td>50元</td>
                <td>10元</td>
            </tr>
        </tbody>
    </table>

        3. 指定相邻单元格边框之间的距离 border-spacing

    <style>
        table {
            margin: 0 auto;
            text-align: center;
            border-spacing:0;
            /* 指定相邻单元格边框之间的距离为0 */
        }

        th,
        td {
            padding: 10px 40px;
        }
    </style>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值