zoukankan html css js c++ java

前端 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>

横着合并 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>

查看全文

相关阅读:
原型设计 + 用户规格说明书
 第三次作业
 MathExam第二次作业
 第一次随笔
 冲鸭第一的合作
 功能规格说明书
 测试与优化
 结对编程
 高分小学计算器
 现实与梦

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

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

表格标签 table

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