前端 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>
前端 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标签是行 ...
随机推荐
- JAVA基础知识点总结（全集）
1.JAVA简介 1.1java体系结构:j2se,javaweb,j2ee 1.2java特点:平台无关(虚拟机),垃圾回收(使得java更加稳定) 1.3 JDK与JRE,JDK:java开发环境 ...
- 使用Android拨打电话功能
1.要使用Android系统中的电话拨号功能,首先必须在AndroidManifest.xml功能清单中加入允许拨打电话的权限: <uses-permission android:name=&q ...
- Linux内核之旅
http://www.kerneltravel.net/ Linux内核之旅 Linux Kernel Travel
- php: Cannot send session cache limiter
修改php.ini中的session.auto_start = 0 为 session.auto_start = 1 MAC 的php.ini 在 /private/etc/ 目录下修改的时候发现su ...
- nginx关闭目录浏览功能
nginx图片服务器,因为图片的敏感度,不允许直接访问图片的目录: 需要修改配置文件,去掉 autoindex on; 重启nginx即可 location /soft { #autoindex on ...
- javascript定时器使用
使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval.其中前者可 ...
- iOS - Xcode项目统计总代码行数
最新公司需要把项目代码量统计一下,第一时间找到Xcode插件管理工具Alcatraz,查找插件ZLXCodeLine,这是一个快速统计Xcode工程项目代码量的插件,好像已经不支持Alcatraz安装 ...
- Nordic NRF51822 从零开始系列（外部设备片—MPU6050DMP驱动的移植）
一.硬件准备 (1)开发板和软件参看 Nordic NRF51822 从零开始系列(一)开发环境的搭建 (2)mpu6050模块 二.前置知识 ...
- （domain）域名协议
https://jingyan.baidu.com/article/2c8c281df0afd00008252aa7.html
- [No0000FF]鸡蛋煮熟了蛋黄为什么发黑？
你是否发现,鸡蛋煮熟后,蛋黄表面会呈现青黑色. 这是怎么回事? 这是因为鸡蛋的蛋白质富含有半胱氨酸,鸡蛋如果加热过度使半胱氨酸部分分解产生硫化氢,与蛋黄中的铁结合形成黑色的硫化铁.煮蛋中如果鸡蛋表面的 ...