html表格标签

表格作用

表格主要用于显示、展示数据。它可以让数据显示的非常规整,可读性好。

表格基本语法

<table>
    <tr>
      <td>单元格内的文字</td>
       ……
    </tr>
    ……
</table>

解释:

  1. 定义表格
  2. 定义表格中的行,嵌套在标签中
  3. 定义表格中的单元格,嵌套在标签中
  4. td即数据单元格的内容

表头单元格标签

<th></th>。一般位于第一行或第一列,显示效果为加粗居中显示。

<table>
    <tr>
      <th>姓名</th>
       ……
    </tr>
    ……
</table>

表格属性(了解)

html表格标签

以上属性均要写入标签中。不常用,通常通过css来设置,作为了解即可。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500">

表格结构标签

使用场景:当表格内容较多时,为了更好的表示表格的语义,将表格分割为表格头部表格主体两大部分。

  • <thead>标签:表格的头部区域
  • <tbody>标签:表格的主体区域
  • <thead></thead>:定义表格的头部。标签内必须拥有标签。一般位于第一行。
  • <tbody></tbody>:定义表格的主体。
<table>
    <thead>
       <tr>
         <th>标题</th>
       </tr>
    </thead>    
    <tbody>
       <tr>
         <td>单元格内的文字</td>
       </tr>
    </tbody>
</table>

合并单元格

  • 跨行合并:rowspan="合并单元格的个数"
  • 跨列合并:colspan="合并单元格的个数"
html表格标签

合并单元格三步曲

  1. 先确定跨行还是跨列合并
  2. 找到目标单元格,写上 合并方式=合并的单元格数量。例如:
  3. 删除多余的单元格

版权声明:本文由迟博勋博主编辑发布,如需转载请注明来源!本文地址:https://www.chiboxun.com/432.html

(0)

猜你想看

发表回复

登录后才能评论

联系博主

139-xxxx-2322

在线沟通: QQ交谈

邮箱:chinachiboxun@gmail.com