【Web开发】第一弹：HTML表格基础与应用实例

原创已于 2024-10-12 17:00:28 修改

· 828 阅读

5 ·

版权

文章标签：

#java #node.js #css3 #ajax #css #html5 #html

于 2024-10-12 16:56:55 首次发布

web开发专栏收录该内容

5 篇文章

订阅专栏

技术点介绍

<table>
  行：tr
  列：td
  表头：自动加粗和居中th,表示列
</table>

table标签单独存在没有意义，必须借助于子标签tr td th

table标签的属性：

名称	作用
border	表格边框
width	表格的宽度
height	表格的高度
cellpadding	单元格边沿与其内容之间的空白
cellspacing	单元格之间的空白
bgcolor :background color	表格的背景颜色

tr属性(行)：

名称	作用
align	单元格内容的水平对齐方式,取值：left 左、right 右、center 居中

td(th)列属性:

名称	作用
colspan	单元格可横跨的列数(横向合并单元格) column
rowspan	单元格可横跨的行数(纵向合并单元格)
align	单元格内容的水平对齐方式,取值：left 左、right 右、center 居中

简单的表格

需求：在页面上显示4个用户的编号、姓名、年龄、性别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        简单的表格实现
    -->
    <!--
        需求：在页面上显示4个用户的编号、姓名、年龄、性别。
        分析：
            4个用户+1个表头---》一共5行 tr
            四列：编号、姓名、年龄、性别
    -->
    <!--table>tr*5>td*4-->
    <!--
        1.cellspacing 单元格之间的距离
        2.cellpadding 单元格内容和边框距离
    -->
    <table border="1px" width="500px" height="400px" cellspacing="0px" cellpadding="0px" bgcolor="green">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>马保国</td>
            <td>69</td>
            <td>男</td>
        </tr>
        <tr>
            <td align="center">002</td>
            <td>柳岩</td>
            <td>18</td>
            <td>女</td>
        </tr>
        <tr>
            <td>003</td>
            <td>杨幂</td>
            <td>18</td>
            <td>女</td>
        </tr>
        <tr>
            <td>004</td>
            <td>刘德华</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

小结：

1.table标签表示表格标签

2.tr表示行

3.td表示列

4.th表示列，表示表头，自动加粗和居中

5.table的属性：

cellspacing：单元格之间的距离

cellpadding 单元格内容和边框距离

6.tr属性：

align: left 靠左 right 靠右 center 居中

7.td或者th属性：

align: left 靠左 right 靠右 center 居中

合并单元格

需求1: 实现跨行,制作电话本

分析：

上述案例有4行，先查看多的行数，2列。对于张三是跨2行的。

跨行使用td标签中的**rowspan属性可以实现纵向合并单元格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        练习2：实现跨行
    -->
    <table border="1px" width="500px" height="400px" cellspacing="0px" cellpadding="0px">
        <tr>
            <th>姓名</th>
            <th>手机号</th>
        </tr>
        <tr>
            <!--
                rowspan="2" 表示跨2行
            -->
            <td rowspan="2">张三</td>
            <td>13800000011</td>
        </tr>
        <tr>
            <!--<td>张三</td>-->
            <td>13800000022</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>139000000001</td>
        </tr>
    </table>
</body>
</html>

需求2: 实现跨列,制作电话本

分析：

上述案例有3行，3列。查看多的列，对于手机号是跨2列的。

跨列使用td标签中的**colspan(横向合并单元格)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        跨列表格：
    -->
    <table border="1px" width="500px" height="400px" cellspacing="0px" cellpadding="0px">
        <tr>
            <th>姓名</th>
            <!--
                表示第2列跨2列，占第2 3列
            -->
            <th colspan="2">手机号</th>
            <!--<th>手机号</th>-->
        </tr>
        <tr>
            <td>张三</td>
            <td>1380000191</td>
            <td>1380000191</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>1390000191</td>
            <td>1390000191</td>
        </tr>
    </table>
</body>
</html>

小结：

1.th或者td具有属性：

1.rowspan:表示跨行

2.colspan:表示跨列

表格标签案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
  1.表格标签：table
  2.table标签的子标签：
    1）行标签：tr
    2) 列标签：td th
        注意：th表示表格标题标签，自动加粗和居中显示
  3.border="1px" 表示表格边框
  4.cellspacing="0px" 表示表格单元格之间的距离是0，即没有距离
  5.width="50%" 表示表格标签的宽度占页面的50%
  6.tr的属性：align="center"，值center表示居中 left 靠左 right 靠右
-->
<table border="1px" cellspacing="0px" width="50%">
    <!-- 第一行 -->
    <tr align="center">
        <!--第一列 -->
        <th>序号</th>
        <!--第二列 -->
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <!-- 第二行 -->
    <tr align="center">
        <!--第一列 -->
        <td>010</td>
        <!--第二列 -->
        <td>
            <img src="../img/三只松鼠.png"  width="25px" height="25px">
        </td>
        <td>
            三只松鼠
        </td>
        <td>
            三只松鼠
        </td>
    </tr>
    <tr align="center">
        <!--第一列 -->
        <td>
            009
        </td>
        <!--第二列 -->
        <td>
            <img src="../img/优衣库.png"  width="25px" height="25px">
        </td>
        <td>
            优衣库
        </td>
        <td>
            优衣库
        </td>
    </tr>
    <tr align="center">
        <!--第一列 -->
        <td>008</td>
        <!--第二列 -->
        <td>
            <img src="../img/小米.png" width="25px" height="25px">
        </td>
        <td>
            小米
        </td>
        <td>
            小米科技有限公司
        </td>
    </tr>
</table>
</body>
</html>

小结

1.表格标签使用的是table作为父标签，作用：使页面显示更加规整
2.table标签的子标签：
    1）tr : 表格的行
    2）td : 表格的列
    3）th : 表格的列，表示这一列是自动居中加粗
    4）caption：表示表格标题，居中显示
    5）tbody:表示表格主体标签,我们不书写，浏览器也会添加，书写就不会添加
3.table标签的属性：
    1）border:表格边框
    2）width:表格宽度
    3）height:表格高度
    4）cellspacing:单元格之间的距离 外部
    5）cellpadding:内容和单元格距离 内部
    6）bgcolor:表格背景颜色
4.tr属性：
    1）align: left  内容靠左  center  : 内容居中  right：内容靠右
5.td属性：
    1）align: left  内容靠左  center  : 内容居中  right：内容靠右
    2）rowspan:跨行 row
    3）colspan:跨列 column