HTML学习02-表格标签

表格标签

表格常常用于显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。

1. 表格的基本语法

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

   • <table></table>用于定义一个表格标签

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

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

   • 字母td指表格数据(table data)，即数据单元格的内容。

     
     

     示例代码：

     <table>
         <tr><td>姓名</td> <td>性别</td> <td>年龄</td> </tr>
         <tr><td>刘德华</td> <td>男</td> <td>56</td> </tr>
         <tr><td>张学友</td> <td>男</td> <td>58</td> </tr>
         <tr><td>郭富城</td> <td>男</td> <td>51</td> </tr>
         <tr><td>黎明</td> <td>男</td> <td>57</td> </tr>
     </table>
     

     
     

     效果如图：

     

     
     

2. 表头单元格标签

   <th>标签表示HTML表格的表头部分(table head的缩写)

   一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

   
   

   示例代码:

   <table>
       <tr><th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
       <tr><td>刘德华</td> <td>男</td> <td>56</td> </tr>
       <tr><td>张学友</td> <td>男</td> <td>58</td> </tr>
       <tr><td>郭富城</td> <td>男</td> <td>51</td> </tr>
       <tr><td>黎明</td> <td>男</td> <td>57</td> </tr>
   </table>
   

   
   

   效果如图：

   

   
   

3. 表格属性

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

   
   

   示例代码：

   <!-- 这些属性要写到表格标签table 里面去 -->
   <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
       <tr><th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
       <tr><td>刘德华</td> <td>男</td> <td>56</td> </tr>
       <tr><td>张学友</td> <td>男</td> <td>58</td> </tr>
       <tr><td>郭富城</td> <td>男</td> <td>51</td> </tr>
       <tr><td>黎明</td> <td>男</td> <td>57</td> </tr>
   </table>
   

   
   

   显示效果：

   

   
   

4. 表格结构标签

   使用场景：因为表格可能很长，所以对于比较复杂的表格，可以将表格分割成表格头部和表格主体两大部分。分别用<thead>标签定义表格的头部区域、<tbody>标签定义表格的主体区域

   
   

5. 合并单元格

   • 合并单元格方式
     • 跨行合并：rowspan="合并单元格的个数"
     • 跨列合并：colspan="合并单元格的个数"
   • 目标单元格
     • 跨行：最上侧单元格为目标单元格，写合并代码
     • 跨列：最左侧单元格为目标单元格，写合并代码
   • 合并单元格步骤
     1. 先确定是跨行还是跨列合并
     2. 找到目标单元格.写上合并的单元格数量。比如：<td colspan="2"></td>
     3. 删除多余的单元格

   示例代码：

   <table width="500" height="249" border="1" cellspacing="0">
       <tr>
           <td></td>
           <td colspan="2"></td>
   
       </tr>
   
       <tr>
           <td rowspan="2"></td>
           <td></td>
           <td></td>
       </tr>
   
       <tr>
   
           <td></td>
           <td></td>
       </tr>
   </table>
   

   
   

   效果如图：