HTML笔记4表格单元

表格元素

1. 表格的基本结构为<table><tr><td>，表格默认情况下是没有边框的，单元格的边距用cellpadding=""设置，单元格之间的间距用cellspacing=""设置,表格中的内容居左居右居中用align="left"；align="right"；align="center"设置
   代码：

   <table border="1">
       <tr>
           <td>单元格00</td>
           <td>单元格01</td>
       </tr>
       <tr>
           <td>单元格10</td>
           <td>单元格11</td>
       </tr>
   </table>
   

   效果：
   

2. 也可以加个标题caption

   <table border="1">
       <caption>单元格title</caption>
       <tr>
           <td>单元格00</td>
           <td>单元格01</td>
       </tr>
       <tr>
           <td>单元格10</td>
           <td>单元格11</td>
       </tr>
   </table>
   

   效果：
   

3. 或者可以设置表头th

   <table border="1" cellspacing='0'>
       <caption>单元格title</caption>
       <hr>
           <th>单元格0</th>
           <th>单元格1</th>
       </hr>
       <tr>
           <td>单元格10</td>
           <td>单元格11</td>
       </tr>
       <tr>
           <td>单元格20</td>
           <td>单元格21</td>
       </tr>
   </table>
   

   效果：
   

4. 其实表格还有thead（表格页眉）、tbody（表格本体）、tfoot（表格页脚）三个语义划分，这个加不加其实效果都差不多，加上只是为了写代码的时候使得代码更有逻辑
   代码：

   <table border="1" cellspacing='0'>
       <caption>成绩表</caption>
       <thead>
           <tr>
               <th>姓名</th>
               <th>地图学</th>
               <th>遥感</th>
               <th>空间分析</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>A</td>
               <td>59</td>
               <td>85</td>
               <td>76</td>
           </tr>
           <tr>
               <td>B</td>
               <td>67</td>
               <td>73</td>
               <td>94</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <td>平均</td>
               <td>64</td>
               <td>79</td>
               <td>85</td>
           </tr>
       </tfoot>
   </table>
   

   效果：
   

5. 跨行跨列的单元格
   合并行：rowspan，语法<th rowspan="要合并的行数"></th>
   代码：

   <table border="1" cellspacing='0'>
       <caption>选修统计表</caption>
           <tr>
               <th>姓名</th>
               <th>A</th>
           </tr>
           <tr>
               <td rowspan="2">选修的课程</td>
               <td>大学国文</td>
           </tr>
           <tr>
               <td>园林设计</td>
           </tr>
   </table>
   

   效果：
   
   合并列：colspan，语法<th colspan="要合并的列数"></th>
   代码：

   <table border="1" cellspacing='0'>
       <caption>重修统计表</caption>
           <tr>
               <th>姓名</th>
               <th colspan="2">重修科目</th>
           </tr>
           <tr>
               <td>A</td>
               <td>数据结构</td>
               <td>arcgis engine</td>
           </tr>
   </table>
   

   效果：