HTML中的表格标签

深藏阁楼爱情的钟 2022-12-15 14:14 245阅读 0赞

# 表格标签 #

表格主要用于显示、展示数据，因为它可以让数据变得非常规整，可读性好。表格不是用来布局页面的，而是用来展示数据的。

<table></talbe>是用于定义表格的标签

<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>中

<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>中

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

表头单元格<th>表示HTML表格中表头部分，表头单元格中的文字会加粗和居中。

表格属性：（表格属性不常用，在CSS中来设置）

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>align</td> 
   <td>left、center、right</td> 
   <td>规定表格相对周围元素的对齐方式</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>1或""</td> 
   <td>规定表格单元是否拥有边框，默认为""，表示没有边框</td> 
  </tr> 
  <tr> 
   <td>cellpadding</td> 
   <td>像素值</td> 
   <td>规定单元边沿与其内容之间的空白，默认1像素</td> 
  </tr> 
  <tr> 
   <td>cellspacing</td> 
   <td>像素值</td> 
   <td>规定单元格之间的空白，默认2像素</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>像素值或百分比</td> 
   <td>规定表格的宽度</td> 
  </tr> 
 </tbody> 
</table>

表格的结构标签，因为表格可能会很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。用<thead>表示表格的头部区域，用<tbody>表示表格的主体区域。

合并单元格

合并单元格的方式：跨行合并和跨列合并

跨行合并:rowspan=“合并单元格的个数”

跨列合并:colspan=“合并单元格的个数”

目标单元格：在目标单元格写合并单元格的代码，，跨行合并时，最上侧的单元格为目标单元格，跨列合并时，最左侧的单元格为目标单元格。

合并单元格三部曲：①确定跨行还是跨列。②找到目标单元格，写上合并方式=合并单元格的数量。③删除多余的单元格。