HTML表格概述

学习目标:
(1)使用表格的基本结构实现简单表格
(2)使用表格相关标签实现跨行、跨列的复杂表格

HTML表格概述

1.1 表格的作用

(1)用来布局内容比较整齐的页面
(2)作为信息管理页面的控件使用

1.2 表格标签

1.2.1 < table >< table />

<table><table/>:表示一个表格,它的常用属性有以下几种:

属性 含义
border 边框线的宽度
align 表格在页面中的对齐方式
bgcolor 表格背景色
background 设置背景图片
cellpadding 单元格内容和边框之间的距离
cellspacing 单元格之间的距离

格式

<table border="边框线的宽度" align="表格在页面中的对齐方式" bgcolor="表格的背景色" background="背景图片"></table>

1.2.2 < thead >< /thead >

<thead></thead>:语义标签,表示表格的头部

1.2.3 < tr >< tr/ >

<tr><tr/>:表示表格的行,一个tr代表一行

属性 含义
align 行的对齐方式
bgcolor 行的背景色
background 设置背景图片

格式

<tr align="行的对齐方式" bgcolor="行的背景色" background="背景图片"></tr>

1.2.4 < th >< th/ >

<th><th/>:表示列头,文字会自动加粗、自动居中,是特殊的单元格

属性 含义
width 列宽

格式

<th width="列宽"></th>

1.2.5 < tbody >< /tbody >

<tbody></tbody>:语义标签,表示表格的主体部分

1.2.6 < td >< /td >

<td></td>:表示表格中的单元格

属性 含义
align 单元格的对齐方式left/center/right
valign 单元格的对齐方式top/bottom

格式

<td align="left/center/right" valign="top/bottom"></td>

1.2.7 < caption >< /caption >

<caption></caption>:表示表格的标题

1.3 表格的格式

    <!--表格边框1像素,位置在页面居中,背景颜色为橙色,内容到单元格距离为5像素,单元格之间距离为6像素-->
    <table border="1" align="center" bgcolor="orange" cellpadding="5" cellspacing="6">
        <caption>表格的标题</caption>
        <thead><!--表格的头部-->
            <tr align="right" bgcolor="pink"><!--这一行中内容靠右对齐,背景颜色为粉色-->
                <th width="100">表</th><!--第一个单元格宽为100像素-->
                <th>格</th>
                <th>列</th>
                <th>头</th>
            </tr>
        </thead>
        <tbody><!--表格的主体-->
            <tr>
                <!--文字靠底部对齐,单元格高度为100像素-->
                <td valign="bottom" height="100">表格</td>
                <!--单元格宽为100像素,文字靠右对齐,且文字靠顶部对齐-->
                <td align="right" width="100" valign="top">中的</td>
                <td>单元</td>
                <td>格 </td>
            </tr>
        </tbody>
    </table>

HTML表格概述

1.4 单元格的合并

1.4.1 跨多列(合并列)

一个单元格占据多列,在<td>中添加属性colspan,该属性的值为占据的列数。

    <table border="1"><!--表格边框宽度1像素-->
        <tr><!--第一行-->
            <!--两列单元格合并,且其中文字居中-->
            <td colspan="2" align="center">信息</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
    </table>

HTML表格概述

1.4.2 跨多行(合并行)

一个单元格占据多行,在<td>中添加属性rowspan,该属性的值为占据的行数。

    <table border="1"><!--表格边框宽度1像素-->
        <tr>
            <!--两行单元格居中-->
            <td rowspan="2">信息</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>年龄</td>
        </tr>
    </table>

HTML表格概述

1.5 实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机</title>
</head>

<body>
    <!--整个表格框架,单元格之间距离为5-->
    <table cellspacing="5">
        <!--第一行:左边的手机模型和第一行字-->
        <tr>
            <!--第一行第一个单元格 手机模型 合并了9行-->
            <td rowspan="9">
                <!--手机模型表格-->
                <table>
                    <!--第一行手机最大的图片 内容居中-->
                    <tr align="center">
                        <!--单元格合并三列,且高度为300像素-->
                        <td colspan="3" height="300">
                            <!-- 我的图片存储的路径,根据自己的情况设置 -->
                            <img src="./imges/dashouji.png">
                        </td>
                    </tr>
                    <!--第二行三个手机小图 内容居中-->
                    <tr align="center">
                        <!--第一个单元格放第一个手机图片-->
                        <td width="150">
                            <img src="./imges/shouji1.png">
                        </td>
                        <!--第二个单元格放第二个手机图片-->
                        <td width="150">
                            <img src="./imges/shouji2.png">
                        </td>
                        <!--第三个单元格放第三个手机图片-->
                        <td width="150">
                            <img src="./imges/shouji3.png">
                        </td>
                    </tr>
                </table>
            </td>
            <!--第一行第二个单元格 第一行字 宋体5号 合并5列-->
            <th colspan="5" align="left" height="50">
                <font face="宋体" size="5">现货送钢化膜Huawei/华为G9青春版plus移动联通全网4G手机</font>
            </th>
        </tr>
        <tr>
            <!--第二行 正品裸价 表格中字体左对齐 合并5列-->
            <th align="left" colspan="5" height="20">
                <!-- 宋体2号粉色字 -->
                <font face="宋体" size="2" color="#FF1493">正品裸价&nbsp;购机送钢化膜&nbsp;保护壳</font>
            </th>
        </tr>
        <!--第三行 价格 设置粉色背景-->
        <tr bgcolor="#FFE1FF">
            <!-- 单元格放整个粉色部分 合并5列 -->
            <td colspan="5" height="50">
                <!-- 拆分成两行三列的表格 -->
                <table>
                    <!--第一行 专柜价 高度20像素 文字靠底部和左部对齐-->
                    <tr>
                        <th height="20" valign="bottom" align="left">
                            <!--宋体灰色2号字-->
                            <font face="宋体" size="2" color="#B5B5B5">专柜价</font>
                        </th>
                        <td width="35">
                            <!--空单元格,对齐后面的元素-->
                        </td>
                        <!--原价1399.00 高度30像素 文字靠底部和左部对齐-->
                        <th height="20" valign="bottom" align="left">
                            <!--s标签为删除线标签-->
                            <font face="宋体" size="2" color="#B5B5B5"><s>¥1399.00</s></font>
                        </th>
                    </tr>
                    <!--第二行 新年价 高度20像素 文字靠顶部和左部对齐-->
                    <tr>
                        <th height="20" valign="top" align="left">
                            <!--宋体灰色2号字-->
                            <font face="宋体" size="2" color="#FF1493">新年价</font>
                        </th>
                        <td width="35">
                        </td>
                        <!--现价1199.00 高度20像素 文字靠顶部和左部对齐-->
                        <th height="20" valign="top" align="left">
                            <font face="宋体" size="4" color="#FF1493">¥1199.00</font>
                        </th>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <!--第四行 运费 行高30 合并5列-->
            <th height="30" align="left" colspan="5">
                <font face="宋体" size="2" color="#B5B5B5">运费&nbsp;</font>
                <font face="宋体" size="3">北京至长春&nbsp;快递:0.00</font>
            </th>
        </tr>
        <tr>
            <!--第五行 月销量 合并5列 文字居左对齐-->
            <th height="30" align="left" colspan="5">
                <font face="宋体" size="2" color="#B5B5B5">月销量&nbsp;</font>
                <font face="宋体" size="2" color="#FF1493">172&nbsp;|&nbsp;</font>
                <font face="宋体" size="2" color="#B5B5B5">累计评价&nbsp;</font>
                <font face="宋体" size="2" color="#FF1493">91&nbsp;|&nbsp;</font>
                <font face="宋体" size="2" color="#B5B5B5">送51购积分&nbsp;</font>
                <font face="宋体" size="2" color="#32CD32">119</font>
            </th>
        </tr>
        <tr>
            <!--第六行 网络类型-->
            <td height="40" width="100">
                <font face="宋体" color="#B5B5B5" size="3">网络类型</font>
            </td>
            <td height="40" width="100" align="center">
                <font face="宋体" size="3">移动联通双4G</font>
            </td>
            <td height="40" width="100" align="center">
                <font face="宋体" size="3">移动4G</font>
            </td>
            <td height="40" width="100" align="center">
                <font face="宋体" size="3">4G全网通</font>
            </td>
            <td height="40" width="100"></td>
        </tr>
        <tr>
            <!--第七行 机身颜色-->
            <td height="40" width="100">
                <font face="宋体" color="#B5B5B5" size="3">机身颜色</font>
            </td>
            <td height="40" width="100" align="center">
                <font face="宋体" size="3">金色</font>
            </td>
            <td height="40" width="100" align="center">
                <font face="宋体" size="3">黑色</font>
            </td>
            <td height="40" width="100" align="center">
                <font face="宋体" size="3">白色</font>
            </td>
            <td height="40" width="100"></td>
        </tr>
        <tr>
            <!--第八行 套餐类型-->
            <td height="40" width="100">
                <font face="宋体" color="#B5B5B5" size="3">套餐类型</font>
            </td>
            <td height="40" width="100" align="center">
                <font face="宋体" size="3">官方标配</font>
            </td>
            <td height="40" width="100"></td>
            <td height="40" width="100"></td>
            <td height="40" width="100"></td>
        </tr>
        <tr>
            <!--第九行储存容量-->
            <td height="40" width="100">
                <font face="宋体" color="#B5B5B5" size="3">存储容量</font>
            </td>
            <td height="40" width="100" align="center">
                <font face="宋体" size="3">16G</font>
            </td>
            <td height="40" width="100" align="center">
                <font face="宋体" size="3">32G</font>
            </td>
            <td height="40" width="100" align="center">
                <font face="宋体" size="3">64G</font>
            </td>
            <td height="40" width="100"></td>
        </tr>
    </table>
</body>

</html>

HTML表格概述

上一篇:同样的代码样式重复敲好几遍,那是不可能滴!看这里,这些“复合选择器”你值得学会


下一篇:multiple属性的使用