HTML(表格标签)
- <table> 标签
- 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- border 属性:规定表格单元拥有边框
- 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- <tr> 表格行标签
- 用来定义表格的一行。由于HTML表格是面向行的,所以必须分别表示每一行
- tr 元素可以在 table,thead,tbody 和 tfoot 元素内使用
- tr 元素内可以包含一个或者多个 td 或 th 元素
- <td> 表格单元格标签
- 用来定义表格单元格,可以同 colspan,rowspan,headers 局部属性使用
- colspan: 左右合并单元格,该属性规定了单元格可横跨的列数,该属性的值必须是整数
- rowspan:上下合并单元格,该属性规定了单元格可横跨的行数,该属性的值必须是整数
- cellpadding:规定单元格边沿与其内容之间的空白
- cellpadding="0" 是让单元格边框线与单元格中的内容之间的距离为0像素,即单元格中内容紧挨着单元格的边线。
- cellspacing:规定单元格之间的空白
- cellspacing="0" 是让各单元格之间的缝隙为0象素
- headers:该属性的值是一个或多个单元的 ID 属性值,将单元格与列标题相关联,可用于使用屏幕阅读器
- width:规定表格宽度
- height:规定表格高度
- align:规定表格相对周围元素的对齐方式
- left
- center
- right
- 用来定义表格单元格,可以同 colspan,rowspan,headers 局部属性使用
- <th> 标题单元格标签
- 用来定义标题单元格,使我们有效区分数据及其描述
- 它同 <td> 元素具有相同的局部属性,两者有如下区别:
- <th> 是表示头标记,通常位于首行或者首列。而且 <th> 中的文字默认会被加粗,而 <td> 是不会的
- <td> 是数据标记,表示单元格的具体的数据
- 快速制表
- 如下快速生成 3 行 2 列的方法
<body>
table>tr*3>td*2 <!-- 输入完后,再按 Tab 键 -->
</body>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年纪</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>一班</td>
</tr>
</table>
</body>
<body>
<table border="1" width="200" height="20">
<tr>
<th>姓名</th>
<th>年纪</th>
<th>班级</th>
</tr>
<tr align="center">
<td>张三</td>
<td>18</td>
<td>一班</td>
</tr>
</table>
</body>
<body>
<table border="1" width="200" height="20">
<tr>
<th>姓名</th>
<th>年纪</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td></td>
<td rowspan="2"></td> <!-- 上下合并 -->
</tr>
<tr>
<td>李四</td>
<td></td>
<!-- <td></td> -->
</tr>
<tr>
<td>王五</td>
<td colspan="2"></td> <!-- 左右合并 -->
<!-- <td></td> -->
</tr>
</table>
</body>
HTML(表格标签)的更多相关文章
- H5 表格标签的其它标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- H5 表格标签基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- HTML常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
- 9月6日表格标签(table、行、列、表头)(补)
一.<table> <table>代表表格标签. <table></table> 1.width 表示表格宽度,宽度表达方式有像素和百分比两种.网 ...
- PHP入门 - - 06-->HTML的表格标签
表格标签<table> <table>的属性: Align: left, center, right (表格的)位置 Border: ...
- 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、!!!表格标签<table>
表格标签 <table> 代表表格 width:指表格的宽度 一种是像素 (浏览器缩小的时候出现滚动条) 一种是百分比(跟着浏览器的大小而大小) b ...
- HTML的表格标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML表格标签
table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...
- html系列教程--span style 及表格标签 title video
<span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...
- HTML表格标签的使用-<table>
<html> <head> <title> 表格标签 </title> <!-- 标签名:table 定义一个表格 子标签:<caption ...
随机推荐
- Powershell检查邮件队列设置阈值,通过html形式进行邮件告警
为了完善公司的整体邮件质量,博主通过zabbix监控了exchange的所有微软推荐项目,并写了很多powershell来辅佐, 旨在更大程度上提高整体的邮件性能 这篇文章主要是讲通过powershe ...
- Dubbo学习系列之十八(Skywalking服务跟踪)
我们知道,微服务不是独立的存在,否则就不需要微服务这个架构了,那么当发起一次请求,如何知道这次请求的轨迹,或者说遇到响应缓慢. 请求出错的情况,我们该如何定位呢?这就涉及到APM(Applicatio ...
- Go语言的GPM调度器是什么?
我是平也,这有一个专注Gopher技术成长的开源项目「go home」 导读 相信很多人都听说过Go语言天然支持高并发,原因是内部有协程(goroutine)加持,可以在一个进程中启动成千上万个协程. ...
- 刨根问底系列(2)——stdin、stdout、FILE结构体、缓冲区和fflush的理解
stdin.stdout.FILE结构体.缓冲区和fflush理解 因为之前调试代码时, printf输出的字符串总是被截断了输出(先输出部分, 再输出剩余的), 当时调试了很久, 才知道问题所在, ...
- git撤销远程commit
git reset --hard [commit_id] git push origin HEAD --force
- spring singleton实例中的变量怎么保证线程安全
pring中管理的bean实例默认情况下是单例的[sigleton类型],就还有prototype类型按其作用域来讲有sigleton,prototype,request,session,global ...
- 用Jenkins集成ios项目设置多scheme,同一代码自动输出多个环境包 实现便捷切换API环境
Jenkins 安装使用参考我的博客http://www.cnblogs.com/zhujin/p/9064820.html Xcode 配置:说明 一个schema 对应一套环境(如生产,测试),一 ...
- WPF 仿语音播放 自定义控件
原理很简单,利用Path画一个图,然后用动画进行播放,播放时间由依赖属性输入赋值与控件内部维护的一个计时器进行控制. 控件基本是玩具,无法作为真实项目使用. 非专业UI,即使知道怎么画图也是画的不如意 ...
- 004-流程控制-C语言笔记
004-流程控制-C语言笔记 学习目标 1.[掌握]关系运算符和关系表达式 2.[掌握]逻辑运算符和逻辑表达式 3.[掌握]运算符的优先级和结合性 4.[掌握]if-else if-else结构的使用 ...
- AJ学IOS 之tableView的下拉放大图片的方法
AJ分享,必须精品 一:效果 tableview下拉的时候上部分图片放大会 二:代码 直接上代码,自己研究吧 #import "NYViewController.h" //图片的高 ...