07-表格

本次的项目：

image.png

表格的作用

当数据量比较大的时候, 表格对数据的组织较好，易于浏览者浏览。

表格的行列与单元格认识

下图的表格共有5行5列共25个单元格

image.png

表格写法

相关标签

<table> 表格
<tr> 表格行(table row) ，简称行
<td> 表格数据单元格(table data cell)，简称单元格
<th> 表格头部单元格(table head cell) ，简称表头单元格

基本表格代码示例

<table>  <!-- 1. 定义表格 -->

   <tr>  <!-- 2. 定义行 -->
      <th>数量</th><th>货品号</th><th>说明</th><th>单价</th><th>行合计</th>  <!-- 3. 定义单元格 -->
   </tr>

   <tr> 
      <td>10</td><td>1</td><td>无</td><td>2</td><td>20</td>  
    </tr>
   
</table>

单元格合并

单元格的合并分为行合并（rowspan）和列合并（colspan）。
具体代码

<table>  <!-- 1. 定义表格 -->

   <tr>  <!-- 2. 定义行 -->
      <th>数量</th><th>货品号</th><th>说明</th><th>单价</th><th>行合计</th>  <!-- 3. 定义单元格 -->
   </tr>

   <tr> 
      <td>10</td><td>1</td><td>无</td><td>2</td><td>20</td>  
    </tr>

   <tr> 
      <td>20</td><td>2</td><td>无</td><td>3</td><td>60</td>  
    </tr>

   <tr> 
      <td>30</td><td>3</td><td>无</td><td>4</td><td>120</td>  
    </tr>

   <tr> 
      <td>40</td><td>4</td><td>无</td><td>5</td><td>200</td>  
    </tr>

   <tr> 
      <td colspan = "4 ">合计</td><td>400</td>  <!-- 本行第一个td占了4列，用colspan = "4" 表示 -->
    </tr>
   
</table>

注意：
各行的单元格数量应保持一致。<td colspan = "4 ">合计</td>表示原本的4个单元格，合并成了1个单元格。数量计算仍然按4个计算。

表格单元格合并练习

image.png

参考代码

<!--border设置表格边框粗细 ，width和height是表格的宽和高，align是设置表格在页面中水平位置>
  <table border="1" width="400" height="400" align="center">  
            <tr align="center">
                <td colspan="2">1</td>
                <td>2</td>          
            </tr>
            <!--tr和td中的align是设置行和单元格中文本的水平对齐方式-->
            <tr  align="center">
                <td rowspan="2">3</td>
                <td>4</td>          
                <td>5</td>          
            </tr>

            
            <tr  align="center">
                <td rowspan="2" colspan="2">7</td>
            </tr>

            <tr  align="center">
                <td>6</td>
            </tr>
</table>

注：好好思考每一行的单元格的合并情况。其实只要弄清楚每一个单元格属于哪一行，向右和向下合并了几个即可。