HTML第二讲-表格与框架

培训信息
+ 培训人：风不习fbx2020@163.com
+ 培训时间：2020-06-27 15:30 至 2020-06-27 16:30
+ 培训内容：HTML表格与框架

第二章：HTML表格与框架

2.1 表格

表格的内涵

• 表格可以将数据有效的组织在一起，并以网格的形式进行显示
• 表格除了用于组织数据外，还可以实现页面或局部页面的排版布局（UI设计，排版）
• 表格使用行与列的方式组织信息
• 表格元素主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成
• 表格元素通过< table >< /table >进行创建

表格的基本组成

    <table>
        <!-- 表格名称 -->
        <caption>学生信息表</caption>
        <!-- 是表格主体，包含表头和表行，一个table标签可以包含多个tbody -->
        <tbody>
            <!-- 表头 -->
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <!-- 表行 -->
            <tr>
                <td>2020001</td>
                <td>张三</td>
                <td>21</td>
            </tr>
            <tr>
                <td>2020002</td>
                <td>李四</td>
                <td>21</td>
            </tr>
            <tr>
                <td>2020003</td>
                <td>王五</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>

注意事项

• 表格的各组成部分要包含在table标签内
• 单元格时表格的基本元素，其中th表示表头，一般默认是加粗的，td表示表的数据，不加粗
• 行采用tr元素表示，代表的表格的水平元素

表格的属性
+ cellspacing/cellpadding属性：设置单元格的外边距和内边距

     <table cellspacing = "20" cellpadding="20"></table>

单元格的属性

• align属性：设置单元格的对其方式，取值有三个：left、center、right

    <tr align="right/left/center"></tr>
    <td align="right/left/center">2020001</td>

• colspan属性：设置单元格占的列数

     <td colspan="2">21</td>

• rowspan属性：设置单元格占的行数

     <td rowspan="2">张三</td>

2.2 框架iframe

含义
+ 框架是用来显示网页、多媒体等内容的一个容器
+ 嵌入在html文档内的网页

框架的定义

    <iframe src="http://www.jiangjianwu.cn/" frameborder="0" width="100%" height="600px"></iframe>

以iframe标签实现一个简单的多搜索引擎入口

    <table cellspacing="0" cellpadding="0">
        <tbody>
            <!-- 放置搜索引擎的链接 -->
            <tr>
                <td>
                    <a target="content" href="https://www.baidu.com">百度</a>
                </td>
                <td>
                    <a target="content"  href="https://www.bing.cn">bing</a>
                </td>
                <td>
                    <a target="content"  href="https://www.sogou.com/">搜狗</a>
                </td>
            </tr>
            <!-- 放置iframe框架 -->
            <tr>
                <td colspan="3">
                    <iframe name="content" id="content"  src="http://www.jiangjianwu.cn/" frameborder="0" width="100%" height="600px"></iframe>
                </td>
            </tr>
        </tbody>
    </table>

作业1：要求使用已经学过的标签，以“拔尖人才”创建一个主题页面