【web:html+css基础】表格标签

1.表格的主要作用

表格主要用于显示、展示数据。因为它可以让数据显示得非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理(合理的使用表格也能够有效提高 SEO)。
**注意:**表格不是用来布局页面的,而是用来展示数据的。表格常用于表单数据的 “布局”
特别强调,表格是用于表单数据的 "布局",而不是页面的布局!

标签名

说明

table

表格整体,可用于包裹多个tr

tr

表格每行,可用于包裹td

td

表格单元格,可用于包裹内容

 2.表格属性

**注意:表格标签的属性在实际开发中并不常用,而是通过后面的 CSS 来设置,这里了解即可。

以下属性都写在 table 开始标签内,多个属性之间用空格隔开。

属性名
属性值
描述
align
left、、centerright
规定表格相对周围元素的对齐方式(默认 left),注意指的是整个表格的对齐方式(表格是在父盒子中默认往左靠,还是居中或是往右靠),而不是指单元格内容的对齐方式(单元格内容对齐可以通过: 设置)(了解)style="text-align: center;"
border
1""
规定表格单元是否拥有边框,默认为 "",表示没有边框(了解)
cellpadding
像素值
规定单元边沿与其内容之间的空白,默认 1 像素(了解)
cellspacing
像素值
规定单元格之间的空白,默认 2 像素(了解)
width
像素值 或 百分比
规定表格的宽度(了解)
height
像素值 或 百分比
规定表格的高度(了解)
caption
表格大标题
表示表格整体大标题,默认在表格整体顶部居中位置显示
th
表头单元格
表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

3.表格结构标签

  • <thead>  </thead> :用于定义表格的头部,  <thead> 内部必须拥有  <tr> 标签,一般是位于第一行,且一般 <tr>  标签中推荐放置  <th> 标签
  • <tbody>  </tbody> :用于定义表格的主体,主要用于放数据本体
  • tfoot:表格底部
  • 以上标签都是放在  标签中 <table> </table>

4.合并单元格

合并单元格的方式:
  • 跨行合并(上下合并): rowspan="合并单元格的个数"
  • 跨列合并(左右合并): colspan="合并单元格的个数"
目标单元格:(写合并代码)
  • 跨行:最上侧单元格为目标单元格,写合并代码
  • 跨列:最左侧单元格为目标单元格,写合并代码
合并单元格三步曲:
  • 先确定是跨行还是跨列合并
  • 找到目标单元格,写上  ,比如: 合并方式=合并的单元格数量 <td colspan="2">  </td>
  • 删除多余单元格
  • 注意:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="622" height="500">
        <caption><strong>学生成绩表</strong></caption>  <!-- 表格标题 -->
        <!-- 表格头部 -->
       <thead>
         <tr>
            <!-- <td>姓名</td>
            <td>成绩</td>
            <td>评语</td> -->
            <th >姓名</th>
            <th >成绩</th>
            <th >评语</th>
            <!-- 表头标签th,可以替换td标签 -->
        </tr>
       </thead>
       <!-- 表格主体 -->
       <tbody>
         <tr>
            <td>小明</td>
            <td rowspan="2">100</td><!-- 跨行合并:上下 -->
            
            <td>孩子,考的真好</td>
        </tr>
        <tr>
            <td>胖龙</td>
          
            <td>成绩不比体重差</td>
        </tr>
       </tbody>
       <!-- 表格底部 -->
       <tfoot>
        <tr>
            <td>总结</td>
           
            <td colspan="2">胖才是真理</td> <!-- 跨列合并:左右 -->
        </tr>
       </tfoot>
    </table>
</body>
</html>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值