HTML表格

一、表格的标准结构

<table>
　　<thead>
　　　　<tr>
　　　　　　<td></td>
　　　　　　<td></td>
　　　　</tr>
　　</thead>
　　<tbody>
　　　　<tr>
　　　　　　<td></td>
　　　　　　<td></td>
　　　　</tr>
　　</tbody>
　　<tfoot>
　　　　<tr>
　　　　　　<td></td>
　　　　　　<td></td>
　　　　　</tr>
　　</tfoot>
</table>

• <table>...</table>标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。
• caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
• <thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。
• <tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<tfoot></ tfoot >标记之后，一般包含网页中除头部和底部之外的其他内容。
• <tfoot></ tfoot >：用于定义表格的页脚，位于<table></table>标记中<thead></thead>标记之后，一般包含网页底部的企业信息等。
• <tr> 表格行用<tr>标签定义，由单元格构成。多个行结合在一起就构成一个表格，这反映在用于创建表格的HTML语法中。表格的每一行都用<tr>标签表示，并用相应的</tr> 结束
• <td> 表格的每一行又有若干表格单元格，用<td>...</td>标签表示。TD是"表格数据( Table Data)”的英文缩写。<td>标签定义一个列，嵌套于<tr>标签内。 border属性是最常用的属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。
• <th>标记及其属性 表头一般位于表格的第一行或第一列，其文本加粗居中。设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。

二、属性：写在table开始标签内

• Border=”1”   边框
• Width=”500”  宽度
• Height=”300” 高
• cellspacing=”2”    单元格与单元格的距离
• cellpadding=”2”    内容距边框的距离
• align=”left  |  right  |  center”  
• 如果直接给表格用align=”center”  表格居中
• 如果给tr或者td使用   ，tr或者td内容居中。
• bgcolor=”red”    背景颜色。

三、单元格合并

• colspan=”2”  合并同一行上的单元格
• rowspan=”2”  合并同一列上的单元格

四、制作细线表格（拓展）

<table bgcolor="green" width=300px height=400px cellspacing="1">
    <tr bgcolor="white">
        <td ></td>
        <td ></td>
        <td></td>
    </tr >
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

 

转载于:https://www.cnblogs.com/EricZLin/p/8605611.html