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

前端 HTML body标签相关内容常用标签表格标签 table的更多相关文章

前端 HTML body标签相关内容常用标签表单标签 form
表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...
前端 HTML body标签相关内容常用标签表单标签 form 表单控件分类
表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性标签上显示内容 input标签 ...
前端 HTML body标签相关内容常用标签超链接标签 a标签
超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...
前端 HTML body标签相关内容常用标签段落标签 p标签
段落标签 <p>,paragraph的简写.定义段落,默认段落之间有间隔的浏览器展示特点: 跟普通文本一样,但我们可以通过css来设置当前段落的样式是否又独占一行呢? 答案是的块级元 ...
前端 HTML body标签相关内容常用标签标题标签 h1-h6
标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...
前端 HTML body标签相关内容常用标签列表标签 ul，ol,li
列表标签 ul,ol,li ul.ol.li标签都属于块级标签,独占一行网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...
前端 HTML body标签相关内容常用标签图片标签 <img/>
图片标签 <img/> 一个网页除了有文字,还会有图片.我们使用<img/>标签在网页中插入图片. <img/> 是单闭合标签语法:<img src=&qu ...
前端 HTML body标签相关内容常用标签表单标签 form里面的 input标签介绍
input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...
前端 HTML body标签相关内容常用标签表单标签 form里面的 label标签介绍
定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

随机推荐

intelliJ idea快捷方式
Ctrl+Shift+N,可以快速打开文件 Ctrl+Alt+L,格式化代码 Ctrl+R,替换文本Ctrl+F,查找文本 Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件 Ctrl+ ...
How to set asp.net Identity cookies expires time
If IsPersistent property of AuthenticationProperties is set to false, then the cookie expiration tim ...
Linux命令行下常用的快捷键
ctrl+a:光标移到行首.ctrl+e:光标移到行尾.ctrl+b:光标左移一个字母ctrl+f:光标右移一个字母 ctrl+h:删除光标前一个字符,同 backspace 键相同.ctrl+d:删 ...
使用iozone测试磁盘性能
IOzone是一个文件系统测试基准工具.可以测试不同的操作系统中文件系统的读写性能.可以通过 write, re-write, read, re-read, random read, random w ...
Android数据解析——JSON
示例一: 有这样一个JSON需要解析,比如: {"thresholds": {"1e-3": 65.3,"1e-5": 76.5," ...
Spark2 Random Forests 随机森林
随机森林是决策树的集合. 随机森林结合许多决策树,以减少过度拟合的风险. spark.ml实现支持随机森林,使用连续和分类特征,做二分类和多分类以及回归. 导入包 import org.apache. ...
D - Football (aka Soccer)
Football the most popular sport in the world (americans insist to call it "Soccer", but we ...
网络通信协议三之TCP/IP模型详解
TCP/IP模型注:PDU:Protocol Date Unit:表示对等层之间传递的数据单位 TCP:Transmission Control Protocol:传输控制协议 UDP:User D ...
InputStream只能读取一次的解决办法 C# byte[] 和Stream转换
x 情景--->>> 导入文件的时候,前台传过来一个文件, 后台接到: HttpPostedFileBase file = Request.Files[];由于对这个文件后台处理比较 ...
[No0000E5]C# 运算符
运算符是一种告诉编译器执行特定的数学或逻辑操作的符号.C# 有丰富的内置运算符,分类如下: 算术运算符关系运算符逻辑运算符位运算符赋值运算符其他运算符算术运算符运算符:A=10,B=20 ...

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

表格标签 table

前端 HTML body标签相关内容 常用标签 表格标签 table的更多相关文章

随机推荐

热门专题

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

前端 HTML body标签相关内容常用标签表格标签 table的更多相关文章