HTML表格与框架学习笔记

发布时间：2024-11-28 04:44:55

HTML表格与框架学习笔记

HTML表格

表格基础

HTML表格使用<table>标签定义。 每个表格由行<tr>组成，每行包含一个或多个单元格<td>。 表头使用<th>标签表示，默认加粗且居中。

示例代码：

<table>
    <tr>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>98</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>95</td>
    </tr>
</table>

单元格合并

跨列合并：使用colspan属性。 跨行合并：使用rowspan属性。

示例代码：

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">考试成绩</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>98</td>
        <td>95</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>88</td>
        <td>90</td>
    </tr>
</table>

表格的结构化标签

<caption>：表格标题 <thead>：表格头部 <tbody>：表格主体 <tfoot>：表格页脚

示例代码：

<table border="1">
    <caption>学生成绩表</caption>
    <thead>
        <tr><th>姓名</th><th>语文</th><th>数学</th></tr>
    </thead>
    <tbody>
        <tr><td>张三</td><td>85</td><td>90</td></tr>
        <tr><td>李四</td><td>78</td><td>92</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="3">数据统计</td></tr>
    </tfoot>
</table>

HTML框架

基础框架概念

HTML5之前 使用<frame>和<frameset>实现多页面分割显示。 已在HTML5中废弃。 HTML5使用iframe <iframe>元素用于嵌套一个网页。

示例代码：

<iframe src="https://www.example.com" width="300" height="200"></iframe>

iframe常用属性

src: 目标页面地址 width 和 height: 设置宽高 name: 框架命名，用于实现链接跳转

iframe链接跳转

通过<a>标签的target属性与iframe的name属性配合实现跳转。

示例代码：

<a href="page1.html" target="myframe">跳转到页面1</a>
<a href="page2.html" target="myframe">跳转到页面2</a>

<iframe name="myframe" width="300" height="200"></iframe>

总结

掌握了HTML表格的基础用法及其合并单元格的技巧。 了解了表格的结构化标签及其使用。 学习了HTML框架的基础知识，并使用iframe标签实现了页面嵌套与跳转功能。

评论数：0