前端 HTML body标签相关内容 常用标签 表格标签 table

表格标签 table

表格由<table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。td标签,数据单元格可以包含放文本<span>标签、图片<img/>标签、列表<ul>、段落<p>、表单<form>、水平线<hr>、表格<table>等等

<table>标签是块级标签

表格简单写法:

<tr>表示一行

<td> 表示一列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <tr>
            <td>第一行,第1列</td>
            <td>第一行,第2列</td>
            <td>第一行,第3列</td>
        </tr>

        <tr>
            <td>第二行,第1列</td>
            <td>第二行,第2列</td>
            <td>第二行,第3列</td>
        </tr>
    </table>

</body>
</html>

 border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>第一行,第1列</td>
            <td>第一行,第2列</td>
            <td>第一行,第3列</td>
        </tr>

        <tr>
            <td>第二行,第1列</td>
            <td>第二行,第2列</td>
            <td>第二行,第3列</td>
        </tr>
    </table>

</body>
</html>

在table里面 td标签里嵌套a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>主机名</td>
            <td>端口</td>
            <td>操作</td>
        </tr>

        <tr>
            <td>1.1.1.1</td>
            <td>80</td>
            <td>
                <a href="http://www.baidu.com">查看详细</a>
                <a href="http://www.python.org">修改</a>
            </td>
        </tr>

         <tr>
            <td>2.2.2.2</td>
            <td>22</td>
            <td>第二行,第3列</td>
        </tr>

         <tr>
            <td>3.3.3.3</td>
            <td>56</td>
            <td>第二行,第3列</td>
        </tr>


    </table>

</body>
</html>

规范写法表格标签:

<tr>表示一行

<td> 表示一列

在<thead>标签里面想显示内容使用<th></th>,显示表格头里的单元格

在<tbody>标签里面想显示内容使用<td></td>,显示表格主体每个单元格信息

<!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">
    <title>Title</title>
</head>
<body>
    <!-- 表格-->
    <table>
        <!-- 表格头 -->
        <thead>
            <tr>
                <!-- th 表格头里的单元格 -->
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>

        <!-- 表格主体 -->
        <tbody>
            <!-- 表格主体每一行-->
            <tr>
                <!-- td 表格主体每个单元格信息 -->
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 给table表格加上属性 border 边框 border="1"

<!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">
    <title>Title</title>
</head>
<body>
    <!-- 表格-->
    <table border="1">
        <!-- 表格头 -->
        <thead>
            <tr>
                <!-- th 表格头里的单元格 -->
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>

        <!-- 表格主体 -->
        <tbody>
            <!-- 表格主体每一行-->
            <tr>
                <!-- td 表格主体每个单元格信息 -->
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

给table表格 加上属性 cellspacing

cellspacing:单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0

加上cellspacing="0"

<!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">
    <title>Title</title>
</head>
<body>
    <!-- 表格-->
    <table border="1" cellspacing="0">
        <!-- 表格头 -->
        <thead>
            <tr>
                <!-- th 表格头里的单元格 -->
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>

        <!-- 表格主体 -->
        <tbody>
            <!-- 表格主体每一行-->
            <tr>
                <!-- td 表格主体每个单元格信息 -->
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

表格行和列的合并 合并属性

rowspan 合并行(竖着合并)
colspan 合并列(横着合并)

锁定要合并的位置

<!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">
    <title>Title</title>
</head>
<body>
    <!-- 表格-->
    <table border="1" cellspacing="0">
        <!-- 表格头 -->
        <thead>
            <tr>
                <!-- th 表格头里的单元格 -->
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>

        <!-- 表格主体 -->
        <tbody>
            <!-- 表格主体每一行-->
            <tr>
                <!-- td 表格主体每个单元格信息 -->
                <td rowspan="3">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

<tfoot> 表格底部 <tfoot> 里面也是 <tr> >> <td>

横着合并 colspan属性 

<!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">
    <title>Title</title>
</head>
<body>
    <!-- 表格-->
    <table border="1" cellspacing="0">
        <!-- 表格头 -->
        <thead>
            <tr>
                <!-- th 表格头里的单元格 -->
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>

        <!-- 表格主体 -->
        <tbody>
            <!-- 表格主体每一行-->
            <tr>
                <!-- td 表格主体每个单元格信息 -->
                <td rowspan="3">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>生物</td>
                <td>化学</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="6">课程表</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

 

原文地址:https://www.cnblogs.com/mingerlcm/p/10609870.html