02HTML表格-课堂作业

html表格

<table>表格　　<tr>行　　<td>单元格

 

基本语法与结构
<table>　　　　　　     <!-表格开始-->

　　<tr>　　　　　　　　   <!- tr行标签-->

　　　　<td >...... </td>　　　　<!- td单元格-->

　　</tr>.......
　　<tr>
　　　　<td>......</td>
　　</tr>
</table>........　　　　　　　　<!-表格结束-->

 

带表头的表格
<table>
　　< tr>
　　　　<th>...</th>　　　　<!-表格头内容居中、加粗显示-->

　　</tr>
　　<tr>
　　　　<td>...</td>
　　...
　　</tr>
</table>

 

 

带标题的表格

<table>

　　<caption>.....</caption>　　　　<!-表格标题，居中显示-->
　　< tr>
　　　　<th>...</th>　

　　</tr>
　　<tr>
　　　　<td>...</td>
　　...
　　</tr>
</table>

 

 

带结构的表格
<table>
　　<caption> ... </caption>
　　<thead>
　　　　<tr>
　　　　　　<th>表头</th>
　　　　</tr>
　　</thead>
　　<tbody>
　　　　<tr>
　　　　　　<td>主体</td>
　　　　</tr>
　　</tbody>
　　<tfoot>
　　　　<tr>
　　　　　　<td>脚注</td>
　　　　</tr>
　　</tfoot>

</table>

 

表格属性

 

 

 内边框

 外边框

 

 

跨列属性colspan
<table>
　　<tr>
　　　　<td colspan=“2” >...</td>
　　<td>..</td>
　　</tr>
　　<tr>
　　　　<td>...</td>
　　　　<td>...</td>
　　　　<td>...</td>
　　</tr>
< /table>

 

跨行属性rowspan
<table>
　　<tr>
　　　　<td rowspan=“2” >...</td>
　　<td>..</td>
　　</tr>
　　<tr>
　　　　<td>...</td>
　　　　<td>...</td>
　　　　<td>...</td>
　　</tr>
< /table>

 

表格布局

• 尽量少的使用表格嵌套
• 尽量少的使用表格跨行跨列

说明:使用表格进行网页结构布局- -般不设置border