HTML学习笔记_表格

在学习前端知识的同时，梳理知识，也便于以后查找

HTML 表格

注：以下这些标签都是必须闭合的！

HTML 表格的基本结构：

标签	功能
table	定义表格
th	定义表格的标题栏（文字变为粗体居中）
tr	定义表格的行
td	定义表格的列

每个表格均有若干行，由tr标签定义；每行被分割为若干单元格，由td标签定义。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格自定义属性

• 边框。使用边框属性border来显示一个带有边框的表格
• 宽、高。在table标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。
  • 可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。
• 背景。但是在HTML5中不推荐使用。不要使用这些属性。
  • bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。
  • background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。需要提供图像url
  • bordercolor属性 - 可以设置边框颜色。
• 表格空间。
  • cellspacing属性-定义表格单元格之间的空间
  • cellpadding属性-表示单元格边框与单元格内容之间的距离

合并单元格

	目的	使用属性
列	将两个或多个列合并为一个列	colspan属性
行	将合并两行或更多行	rowspan属性

行合并demo

<table border = "1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td rowspan = "2">Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
    </tr>
    <tr>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>
    </tr>
    <tr>
        <td colspan = "3">Row 3 Cell 1</td>
    </tr>
</table>

运行效果：

列合并同理

HTML表格头部、主体、页脚

表格可以分为三个部分 - 头部，主体和页脚。

• 表可以包含多个tbody元素以指示不同的页面。
• thead和tfoot标签应出现在tbody之前

	标签	功能
表格头部	thead	创建单独的表头
表格主体	tbody	表示表格的主体
页脚	tfoot	创建一个单独的表页脚

<table border = "1" width = "100%">
    <thead>
        <tr>
            <td colspan = "4">This is the head of the table</td>
        </tr>
    </thead>
         
    <tfoot>
        <tr>
            <td colspan = "4">This is the foot of the table</td>
        </tr>
    </tfoot>
         
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </tbody>         
</table>

demo运行截图

表格的嵌套

在另一个表格中使用一个表格。

• 可以使用table内的几乎所有标签。

<table border = "1" width = "100%">
    <thead>
        <tr>
            <td colspan = "4">This is the head of the table</td>
        </tr>
    </thead>
         
    <tfoot>
        <tr>
            <td colspan = "4">This is the foot of the table</td>
        </tr>
    </tfoot>
         
    <tbody>
       <td>
            <table border = "1" width = "100%">
                <tr>
                    <th>Name</th>
                    <th>Salary</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>赵二</td>
                    <td>7000</td>
                </tr>
            </table>
        </td>
        <td>
            法外狂徒牛三！
        </td>
    </tbody>         
</table>

表格的嵌套demo运行截图

–END–