前端 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标签是行 ...

随机推荐

经典的HTML5游戏及其源码分析
HTML5已经相当强大,在HTML5平台上,我们可以完成很多非常复杂的动画效果,包括游戏在内.早期我们只能利用flash来实现网络游戏,现在我们又多了一种选择,即用HTML5制作游戏.相比flash, ...
字符串时间与Unix时间戳相互转换
字符串时间与Unix时间戳相互转换 /** * @Author: wangkun * @Date : 2016/1/21 13:43 * @Description : 字符串时间转换为Unix时间戳 ...
Android Demos
SDK Manager 下载demo后,可以到SDK目录下面找例如 C:\Program Files (x86)\Java\adt-bundle-windows-x86\sdk\samples\ ...
[PHP] 07 - Json, XML and MySQL
前言 [Node.js] 09 - Connect with Database 菜鸟JSON教程[内容不多] PHPSimpleXML[大概了解下即可] SQL语句需要复习一遍:http://www. ...
【消灭代办】第2周 - 数组判断、开发工具、transform:matrix、Grid
2018.11.19代办一:[数组判断] 代办描述: 怎么判断一个数组是数组呢?其实这个也是一个常考的题目关键考点: 1.js中对象类型判断的几种方法 2.数组的知识和灵活运用解决方案s: 篇幅过 ...
关于vb代码复制到其他地方出现乱码的问题
今天笔者在学习vb编程时,想将自己的一段测试代码记录到云笔记中,方便以后查阅,代码如下: 结果在复制到其他的地方的时候,均出现乱码的现象,主要是针对代码的中的中文,如下效果 Private Sub C ...
关于pyinstall打包时的依赖问题
前几天写了一个人脸表情分析的小程序,想用pyinstall打包成一个可以移植的小软件.因为之前用过pyinstall,所以这次使用同样的方法对我的程序进行打包: [pyinstaller -F --i ...
web 常用开发工具
he把字符转化为实体字符 awesome-vue Vue资源 clipboard.js 粘贴板 Share.js 一键分享 nock 模拟异步数据 Clamp.js 限制文本最大行数 pinyin 将 ...
170828、Eclipse Java注释模板设置详解以及版权声明
编辑注释模板的方法:Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元素 ...
css3---2D效果 ---3D效果
CSS3边框: CSS3圆角:border-radius(**px 或 **%) 属性——创建边框线的圆角 CSS3盒子阴影:box-shadow属性——创建阴影 box-shadow:30px 0p ...

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

表格标签 table

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

随机推荐

热门专题

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

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