HTML表格

HTML表格

表格：用于显示数据
1、表格的基本结构：

<table  width=" 100"  height="100 "  border="1"   cellspacing="0"   cellpadding="0">
   <tr>
           <th>第一行第一个单元格</th>
           <td>内容</td>
           <td>内容</td>
   </tr>
   <tr>
           <td>第二行第一个单元格</td>
           <td>内容</td>
           <td>内容</td>
   </tr>
   <tr>
           <td>第三行第一个单元格</td>
           <td>内容</td>
           <td>内容</td>
   </tr>
</table>

在网页中的显示结果：

第一行第一个单元格	内容	内容
第二行第一个单元格	内容	内容
第三行第一个单元格	内容	内容

其中：一个tr代表一行；一个td代表一个单元格;th表示列标题，它默认将单元格内的字体加粗
表格中相关的属性：
（1）表格的宽度：width=""
（2）表格的高度：height=""
（3）表格的边框（宽度）：border=""
（4）表格的背景颜色：bgcolor=""
（5）表格的边框颜色：bordercolor=""
（6）单元格与单元格之间的间距：cellspacing=""
（7）单元格与内容之间的间距：cellpadding=""
（8）单元格水平对齐方式（将此属性加在表格上的话，表示的是表格相对于浏览器的对齐方式；如果加在tr或者td上面表示的是内容相对于单元格的水平对齐方式）：align=“left/center/left”
（9）垂直对齐方式（加在tr或者td上面表示的是内容相对于单元格的垂直对齐方式）：valign=“top/middle/bottom”
（10）合并单元格属性：

1. 合并行(属性值为数字，表示所合并的行数)：rowspan=""

    <table>
    	<tr>
    		<td></td>
    		<td></td>
    	</tr>
    	<tr>
    		<td rowspan="2"></td>
    		<td></td>
    	</tr>
    	<tr>
    		
    		<td></td>
    	</tr>
    </table>

在网页中显示效果：

3. 合并列(属性值为数字，表示所合并的列数)：colspan=""

    <table>
    	<tr>
    		<td></td>
    		<td></td>
    	</tr>
    	<tr>
    		<td colspan="2"></td>
    		
    	</tr>
    	<tr>
    		<td></td>
    		<td></td>
    	</tr>
    </table>

在网页中显示效果：

注：跨行合并就是行合并用rowspan,跨列合并就是列合并用colspan,无论是行合并还是列合并都是td的属性；（合并一次删除一次）