HTML基础篇之表格的运用
<html> <head> <title></title> </head> <body> <table border=”1”> <tr> <th>我是表头1</th> <th>我是表头2</th> </tr> <tr> <td>第一列第一个单元格</td> <td>第一列第二个单元格</td> </tr> <tr> <td>第二列第一个单元格</td> <td>第二列第二个单元格</td> </tr> </table> </body> </html>
表格用的标签<table>,帮表格分行用<tr>；定义表格单元格<td>；<th> 定义表头；关于boeder这个会在等下讲表格的属性的时候会讲到。
这个是一个最简单的表格。你们可以这样理解<table>先创建一个空白的没有单元格的空表格，然后我们加入了X个tr和Y个td一个空白的空表格里面多了X列Y个单元格。X和Y分别是数字。然后我们在td里面加入自己的内容，一个简单的表格就生成了。
Table常用的属性
属性属性值理解
width px、 % 指定表格的宽度
height px、% 表格的高度
border px 指定表格边框的宽度
cellpadding px 指定边框与内容之间的空白
cellspacing px、 % 指定单元格之间的空白
align left、 right 、 center 指定对齐方式
valign top、 middle 、 bottom 垂直排列方式
Background=”” 表格的背景图片
Bordercolor=”” 表格边框的颜色
Bordercolorlight=”” 亮边框的颜色
Bordercolordark=”” 暗边框的颜色
单元格合并属性
<td colspan=”x”></td>
Colspan:合并列单元格，x为要合并的列数。
<td rowspan=”x”></td>
Rowspan:合并行单元格，x为要合并的行数
合并在表格中如何运用
注：第一个为没有合并（为了让你们知道有哪些变化特地用了一个没有合并一个合并的）
<html> <head> <title></title> </head> <body> <table border=”1”> <tr> <th>我是表头1</th> <th>我是表头2</th> </tr> <tr> <td >第一列第一个单元格</td> <td >第一列第二个单元格</td> </tr> <tr> <td>第二列第一个单元格</td> <td>第二列第二个单元格</td> </tr> <tr> <td>第三列第一个单元格</td> <td>第三列第二个单元格</td> </tr> </table>
注：下面为合并的（合并了行单元格和列单元格）
<html> <head> <title></title> </head> <body> <table border=”1”> <tr> <th>我是表头1</th> <th>我是表头2</th> </tr> <tr> <td colspan=”2”>第一列第一个单元格</td> </tr> <tr> <td rowspan=”2”>第二列第一个单元格</td> <td>第二列第二个单元格</td> </tr> <tr> <td>第三列第二个单元格</td> </tr> </table>
注意：
合并的时候注意要把你写合并属性的那个单元格也要算上。不然合并会出现少合了一个。
列是表格从左往右，行是从上往下。（这句话结合表格看来看会清楚一点）
属性width、height、border、cellpadding、cellspacing的用法
<html> <head> <title></title> </head> <body> <table border=”1” width=”80%” height=”100%” cellpadding=”30px” cellspacing=”20px” bordercolor=”#111000” bordercolorlight=”#00cc00” bordercolordark=”#cc00aa” background=”没有背景图片”> <tr> <th>我是表头1</th> <th>我是表头2</th> </tr> <tr> <td >第一列第一个单元格</td> <td >第一列第二个单元格</td> </tr> <tr> <td>第二列第一个单元格</td> <td>第二列第二个单元格</td> </tr> <tr> <td>第三列第一个单元格</td> <td>第三列第二个单元格</td> </tr> </table>
大家可以复制一下之前表格的代码和上面这个代码看看有哪些变化。width是网页的所占宽度为百分之80，height高度为百分之100，这个属性我暂时较少用到还有后面的Bordercolorlight、Bordercolordark。
表格这里需要理解透彻不然在后面用表格编辑网页会经常出来错误。要多注意！！
