web td不对齐_WEB前端-HTML表格

一、基础表格

基本语法与结构

<table>                                   <!--表格开始-->
    <tr>                                  <!--tr行单元格-->
        <td>....</td>                     <!--td单元格-->
        ....
    </tr>
    <tr>
        <td>....</td>
        ....
    </tr>
</table>                                   <!--表格结束-->

创建2行三列的表格：

<table border="1">
    <tr>
        <td>2014</td>
        <td>2015</td>
        <td>2016</td>
    </tr>
    <tr>
        <td>800</td>
        <td>1000</td>
        <td>1200</td>
    </tr>
</table>

---

二、表格操作

1、带表头的表格

<table>
    <tr>
        <th>....</th>                          <!--表格头，内容居中，加粗显示-->
        ....
    </tr>
    <tr>
        <td>....</td>                          <!--定义普通单元格，不加粗，默认左对齐-->
        ....
    </tr>
    ....
</table>

---

2、带标题的表格

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

---

3、带结构的表格

• thead:表格的头（放表格的表头）
• tbody:表格的主体（放数据本体）
• tfoot：表格的脚（放表格的脚注）

<table>
    <caption>....</caption>
    <thead>                                   <!--不影响表格布局-->
        <tr>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>                                   <!--不影响表格布局-->
        <tr>
            <td>主体</td>
         </tr>
     </tbody>
    <tfoot>                                         <!--不影响表格布局-->
        <tr>
            <td>脚注</td>
         </tr>
     </tfoot>
</table>

---

4、表格属性

• <table>标签属性

• <tr>标签属性

• <thead>、<tbody>和<tfoot>标签属性

---

5、表格跨行列

• 跨列属性colspan

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

• 跨行属性rowspan

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

---

6、表格嵌套

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

嵌入表格说明：

1. 完整表格结构
2. 放到<td>标签中