HTML表格的运用
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
代码如下:
<table border="1"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr> </table>
1.表格标签:
<caption> | 定义表格标题 |
<col> | 为表格的列定义属性 |
<colgroup> | 定义表格的列的分组 |
<table> | 定义表格 |
<td> | 定义一个单元格 |
<tfoot> | 定义表格的标注(底部) |
<th> | 定义表格的表头 |
<tbody | 定义表格主体 |
<thead> | 定义表格的表头 |
<tr> | 定义表格的行 |
<table> <caption>这里是标题</caption> <colgrounp span="1" style="background:#DEDEDE;"/>/*这里控制第一列*/ <colgrounp span="2" style="background:#EFEFEF;"/>/*这里控制第二列*/ <!-- Table Header--> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> </tr> </thead> <!--Table Footer--> <tfoot> <tr> <td>foot1</td> <td>foot1</td> <td>foot1</td> </tr> </tfoot> <!--Table Body--> <tbody> <tr> <td>a</td> <td>a</td> <td>a</td> </tr> <tr> <td>a</td> <td>a</td> <td>a</td> </tr> </tbody> </table>
(注意:通常很少使用<thead>,<tbody>,<tfoot>标签,因为浏览器对它们的支持不好。)
2.表格属性:
border | 此属性定义表格的边框 |
cellspacing | 单元格间距 |
cellpadding | 边框与内容之间的空白 |
width | 表格的宽度 |
height | 表格的高度 |
bgcolor | 表格的背景色 |
background | 表格的背景图 |
bordercolor | 表格的边框颜色 |
bordercolorlight | 亮边框颜色,border值不为零设置此值有效 |
bordercolordark | 暗边框颜色,border值不为零设置此值有效 |
align | 表格的对齐方式,值有left,center,right |
valign | 表格的垂直对齐方式,值有top(顶部对其) middle(居中,默认)、bottom(底部对齐) |
colspan(在<td>写) | 合并列单元格,值为要合并的列数 |
rowspan(在<td>写) | 合并方单元格,值为要合并的列数 |
合并单元格代码如下:
<!--跨两列的表格--> <table border="1"> <tr> <td>姓名</td> <td colspan="2">电话</td> </tr> <tr> <td>木木</td> <td>520</td> <td>748</td> </tr> </table> <!--跨两行的表格--> <table border="1"> <tr> <td>姓名</td> <td>木木</td> </tr> <tr> <td rowspan="2">电话</td> <td>520</td> </tr> <tr> <td>748</td> </tr>
(未完待续...)