HTML表格元素入门(看完让你轻松掌握HTML表格写法!)

一.HTML表格元素简介

 表格以“行”与“列”的方式展现数据

1.HTML 表格由 <table> 标签来 定义
2.每个表格包含若干行,由 < tr > 标签 定义
3.每 行被分割为若干 单元格,由 <td> 标签 定义
4.数据单元格可以包含文本、图片、列表 、表单、表格等
5. 表格内容进行更加精确的分组
      <caption> 表格标题
      < thead > 表格头
      < tbody > 表格体

             <tfoot> 表格尾

二.最简单的表格定义代码示例

<body>   

<h2>用户信息表</h2> /*表名*/   

<table border="1"> /*表格边界大小*/       

    <tr>           /*第一行*/

        <td>张三</td>           

        <td>23</td>           

        <td>上海</td>        

    </tr>       

    <tr>   /*第二行*/         

        <td>李四</td>           

        <td>29</td>           

        <td>北京</td>       

    </tr>   

</table>

</body>

三.表格添加<caption><thead><tbody><tfoot>代码示例

<table border="1" width="100%">

    <caption>用户信息表</caption>       /*表格标题*/

    <thead>      /*表格头*/      

        <tr>               

            <th>姓名</th> <th>年龄</th>           

        </tr>       

    </thead>       

    <tbody>      /*表格内容*/      

        <tr>               

            <td>张三</td> <td>20</td>           

        </tr>           

        <tr>               

            <td>李四</td> <td>30</td>           

        </tr>       

    </tbody>       

    <tfoot>        /*表格尾*/    

        <tr>             

            <td>平均年龄</td> <td>25</td>           

        </tr>       

    </tfoot>   

</table>

四.表格合并简介

学习表格合并,重点是要分清什么是行合并,什么是列合并

(不清楚的可以打开excle实践操作一下)

行合并:行与行之间合并,是垂直方向的合并

列合并:列与列之间合并,是水平方向的合并

五.表格行合并代码示例表格合并行属性 rowspan 将多行合并成一行

<table border="1">       

    <tr>        /*第一行*/    

        <td colspan="3" >用户信息表</td>            

    </tr>       

    <tr>           

        <td>张三</td>           

        <td>23</td>           

        <td rowspan="2">上海</td>       /*第一行的第三个单元格和第二行的第三个单元格合并*/

    </tr>       

    <tr>           

         <td>李四</td>           

        <td>29</td>           

    </tr>   

</table>

六.表格列合并代码示例表格合并列属性 colspan 将多列合并成一列

 

<table border="1">       

    <tr>           

        <td colspan=“3”>用户信息表</td>     /*第一行三列合并*/       

    </tr>       

    <tr>           

        <td>张三</td>           

        <td>23</td>           

        <td>上海</td>       

    </tr>       

    <tr>           

         <td>李四</td>           

        <td>29</td>           

        <td>北京</td>       

    </tr>   

</table>

 

  • 12
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值