前端三评

一、表格table的应用

模拟我们的Excel表格

用来展示批量数据

按照从左到右，从上到下的顺序排列组成

数据保存在单元格里

1、创建表格

定义表格，使用成对的table标签

创建表行，tr

创建单元格，td、th

html

//表格，有行+单元格组合而成，写的时候要配套写
<table>
    //每写一个tr在，则表示写了一行
    <tr>
    	<td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>爱好</td>
    </tr>
</table>

2、表格常用属性

html

		table属性：
			-width
			-height
			-align，对齐方式(left,right,center)
			-border
			-cellpadding,设置内边距(单元格边框与内容之间的距离)
			-cellspacing,设置外边框(单元格与单元格之间的距离)
			-bgcolor,表格背景颜色

		tr属性：
			-align,水平对齐方式
			-valign,垂直对齐方式(top,bottom,middle)

		td/th属性：
			-align,水平对齐方式
			-valign,垂直对齐方式(top,bottom,middle)
			-width
			-height
			-colspan,设置单元格跨列
			-rowspan,设置单元格跨行

举例如下：

html

    <table bgcolor="pink" border="1" width="50%" align="center" cellpadding="10" cellspacing="0"  >
        <!-- //每写一个tr在，则表示写了一行
            tr行的属性
                1. 水平对齐方式
                    align="left|center|right"   
                    默认是居左
                2. 垂直对齐方式
                    valign="top|middle|bottom"
                    默认是居中
                3. 高度
                    height="数值"
                    默认是自适应

         -->
        <tr >
            <!-- td 也有属性
                1. width="百分比|数字"  宽度
                2. height="百分比|数字" 高度
                3. align="left|center|right" 对齐方式
                4. 垂直对齐方式
                    valign="top|middle|bottom"
            
             -->
            <td width="100" align="center">姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>爱好</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
            <td>游戏</td>
        </tr>
    </table>

3、表格的其它组成

a、标题caption

b、表格分组(表头thead、表主体tbody、表尾tfoot)

html

<table border="1" width="50%" cellspacing="0" cellpadding="5">
        <caption>表格标题</caption>
        <!-- 表头，有行和列组成 ，可以多行-->
        <thead bgcolor="gray">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <!-- 表主体 ,可以多行-->
        <tbody bgcolor="#C7FCE1">
           <tr>
               <td>张三</td>
               <td>18</td>
               <td>游戏</td>
           </tr>
           <tr>
               <td>李四</td>
               <td>19</td>
               <td>游戏</td>
           </tr>
        </tbody>
        <!-- 表尾 -->
        <tfoot bgcolor="purple">
            <tr>
                <td align="right" style="color: #fff;" colspan="3">合计：199</td>
            </tr>
        </tfoot>
    </table>

4、表格的嵌套

在单元格中再放置另外一个表格

也就是在<td></td>中放置另外的表格

html

<table>
    <tr>
        <td>李四</td>
        <td>
            <!-- 嵌套了一个表格 -->
            <table border="1">
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>444</td>
                </tr>
                <tr>
                    <td>33</td>
                    <td>55</td>
                    <td>66</td>
                </tr>
            </table>
        </td>
        <td><img src="2.jpg" width="100"></td>
    </tr>
</table>

5、表格的跨行跨列（重点）

a.跨行步骤

找到要跨行的第一个单元格，给他添加rowspan="要跨的行数，比如2"

找到另外一行的那个单元格，将其删除或注释

html

<table  border="1" cellspacing="0"  >
    <tr >
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>爱好</td>
    </tr>
    <!-- 第二行 -->
    <tr>
        <td>张三</td>
        <!-- rowspan为跨行 -->
        <td rowspan="2">18</td>
        <td>男</td>
        <td>游戏</td>
    </tr>
    <tr>
        <td>李四</td>
        <!-- <td>18</td> -->
        <td>男</td>
        <td>游戏</td>
    </tr>
</table>

b. 跨列步骤

找到要跨行的第一个单元格，给他添加colspan="要跨的列数，比如2"

找到另外一列的那个单元格，将其删除或注释

html

    <table  border="1" cellspacing="0"  >
        <tr >

            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>爱好</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>张三</td>
            <td>18</td>
            <!-- 跨列 -->
            <td colspan="2">男</td>
            <!-- <td>游戏</td> -->
        </tr>
        <tr>
            <td>李四</td>
            <td>18</td>
            <td>男</td>
            <td>游戏</td>
        </tr>
    </table>

二、表格细边框的实现

1、使用CSS实现（推荐）

将table的border属性设置为1，然后使用CSS的属性border-collapse属性设置为collapse，来合并边框。具体代码如下：

html

<table border="1">
</table>

css

table{
    border-collapse: collapse;
}

2、使用表格属性实现（不推荐）

将table的border属性设置为1，然后使用另外的html表格属性cellspacing来合并边框。具体代码如下：

html

<table border="1" cellspacing="0">
</table>

三、内联框架-iframe

在一个页面中嵌入另外一个独立页面。

主要属性：

-name规定框架的名字
-width框架的宽
-height框架的高
-src框架的源地址
-scrolling规定是否在框架内有滚动条，取值：yes|no|auto(默认值)
-frameborder 规定框架是否有边框取值：1|0

html

<iframe src="页面url地址">
    在标记里面可以写入内容，当浏览器不能识别这个标签时则显示(绝大部分浏览器都能识别)
</iframe>
<!--比如-->

<iframe width="500" height="500" frameborder="0" src="https://www.baidu.com/" scrolling="no"></iframe>

获取本次课程作业和案例

如需本次课作业、笔记、案例等，请+作者微信（imqdcnn）获取。

一、表格table的应用 ​

二、表格细边框的实现 ​

三、内联框架-iframe ​

相关单词 ​

获取本次课程作业和案例 ​

一、表格table的应用

二、表格细边框的实现

三、内联框架-iframe

相关单词

获取本次课程作业和案例