【表格的应用】

首先，如何写出一个简单的表格

以下是一个最简单的表格，每个单元格的大小是按照里面的内容进行自动分配的，所以就会出现单元格不均等的情况

  <table border="1" width="500" height="200">
   	 <tr>
		    <td>123231</td>
		    <td>2</td>
		    <td>3</td>
	   </tr>
	   <tr>
		    <td>1</td>
		    <td>2</td>
		    <td>3</td>
	  </tr>
	   
  </table>

这样的表格虽然叫做表格，但是它实在太简陋了。。。。

接下来，进行一些优化，让它看起来美观一些

<table border="1" height="200" width="500">
   <thead>
	    <tr>
    		 <th>姓名</th>
   		  <th>班级</th>
    		 <th>年级</th>
 	   </tr>
   </thead>
   <tbody >
   	 <tr align="center" >
		     <td >1222</td>
		     <td >2</td>
		     <td >3</td>
	  </tr>
    <tr>
		     <td>1</td>
		     <td>2</td>
		     <td>3</td>	
	</tr>
    
   </tbody>
  </table>

这是一个相对完整的表格

now 做一些简单的说明解释吧

1、<table></table>标签 就是创建出一个表格了
2、<tr></tr> 代表表格的行 <td></td>就是列了 （本人将其与c语言中的二维数组联系起来，感觉很像）。
3、border 设置了表格的边框 height width 顾名思义就是 长度和宽度的设置
4、<th></th> 是专门设置表格的第一栏（如图所示的姓名 班级那一栏）

下面是满满干货！！！&& 跨行合并

1、align 水平居中 table加的是让整个表格在页面中居中
2、valign 垂直居中
3、cellsapcing 单元格与单元格之间的间距
4、cellpadding 单元格内部填充
5、colspan 跨列合并 删除当前行后面的多余的单元格
6、rowspan 跨行合并 删除下面行多余的单元格

<table border="1" width="200" cellspacing="0" cellpadding="20">
  <tr align="center">
	    <td colspan="3">123231</td>
	    <!-- <td >2</td>
	    <td >3</td> -->
  </tr>	
   <tr>
	    <td rowspan="3">1</td>
	    <td>2</td>
	    <td>3</td>
	   </tr>
   
   <tr>
    
	    <td>2</td>
	    <td>3</td>
   </tr>
   <tr>
    
	    <td>2</td>
	    <td>3</td>
   </tr>
  </table>