html入门(四)—— 表格(table)

1. 基本标签
    A. 表格的基本标签包括
        table(表格),必要标签
        caption(表名)
        tr(行,即table row),必要标签
        th(表头,即table header,浏览器将其解释为加粗且居中显示)
        td(单元格,即table data cell,浏览器将其解释为居左显示),必要标签
        e.g. <table>
               <caption>成绩表</caption>
               <tr>
                 <th>姓名</th>
                 <th>语文</th>
                 <th>数学</th>
               </tr>
               <tr>
                 <td>小明</td>
                 <td>90</td>
                 <td>80</td>
               </tr>
               <tr>
                 <td>小丽</td>
                 <td>98</td>
                 <td>90</td>
               </tr>
               <tr>
                 <td>平均</td>
                 <td>94</td>
                 <td>85</td>
               </tr>
            </table>
    B. 默认情况下,表格没有边框,需要使用CSS添加。
2. 表格语义话
    A. 可通过使用thead、tbody和tfoot标签增加表格的语义话
        e.g. <table>
               <caption>成绩表</caption>
               <thead>
                 <tr>
                   <th>姓名</th>
                   <th>语文</th>
                   <th>数学</th>
                 </tr>
               <thead/>
               <tbody>
                 <tr>
                   <td>小明</td>
                   <td>90</td>
                   <td>80</td>
                 </tr>
                 <tr>
                   <td>小丽</td>
                   <td>98</td>
                   <td>90</td>
                 </tr>
               <tbody>
               <tfoot>     
                 <tr>
                   <td>平均</td>
                   <td>94</td>
                   <td>85</td>
                 </tr>
               <tfoot>
            </table>
        注:可以看出,有没有thead、tbody和tfoot标签对显示效果没有影响,只是增强了html代码的语义话。
3. 合并行
    使用th或td标签的rowspan属性,rowspan=x表示合并当前单元格下侧的x个单元格(包括当前单元格),也就是当前单元格横跨的行数。
4. 合并列
    使用th或td标签的colspan属性,colspan=x表示合并当前单元格右侧的x个单元格(包括当前单元格),也就是当前单元格横跨的列数。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值