table标签用法
<table>标签
HTML中表格由 <table> 标签来定义。
每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。<td>标签中表示内容,即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
<table>标签的基本格式
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
功能: <table>…</table>用来声明表格开始与结束.
<tr>…</tr>用来设置表格的行.
<th>…</th>用来设置标题栏位.
<td>…</td>用来设置数据栏位.
<table>标签下的属性
|
属性 |
属性值 |
说明 |
|
border |
像素 |
表格边框宽度 |
|
height |
像素、百分比 |
表格整体高度 |
|
width |
像素、百分比 |
表格整体宽度 |
|
cellpadding |
像素、百分比 |
边框与单元格的距离 |
|
cellspacing |
像素、百分比 |
单元格边框宽度 |
|
align |
Left、center、right |
对齐方式 |
|
bgcolor |
英文、16进制、rgba |
表格背景颜色 |
|
background |
url |
表格的背景图片 |
<tr><th><td>标签下的常用属性
|
属性 |
属性值 |
说明 |
|
width |
像素、百分比 |
设置单元格的宽 |
|
height |
像素、百分比 |
设置单元格的高 |
|
align |
Left、center、right |
水平移动 |
|
valign |
Top、middle、bottom |
垂直移动 |
|
nowrap |
无 |
在单元格中换行 |
查分合并单元格
|
属性 |
属性值 |
说明 |
|
colspan |
数字(占据的列数) |
由左向右扩展 |
|
rowspan |
数字(占据的行数) |
由上向下扩展 |
注意:合并单元格时,需要删除所占用位置的代码
表格的结构化、标题
1.结构化格式:
<table>
<thead>……</thead> --------表头区
<tbody>……</tbody> --------表体区
………………
<tfoot>……</tfoot> --------表尾区
</table>
2.表格的标题(只能有一个):
<table>
<caption>标题内容</caption>
</table>
<caption>标签下的属性值有:
| 属性名 | 属性值 | 说明 |
| align | top | 标题在表格上方 |
| bottom | 标题在表格下方 |
table标签用法的更多相关文章
- Web前端设计:Html强制不换行<nobr>标签用法代码示例
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...
- HTML——表格table标签,tr或者td
表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...
- python处理html的table标签
转载:http://www.xuebuyuan.com/583071.html python处理html的table标签 2012年01月06日 ⁄ 综合 ⁄ 共 5279字 ⁄ 字号 小 中 大 ⁄ ...
- H5 新标签用法及解释
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...
- alter table的用法
在数据库开发过程中,除了用得最多的数据库查询外,我们有时也需要去修改数据表的定义,比如在已存在的数据表中新增列和删除列等.这篇文章就总结一下alter table语句的用法. 示例代码如下. USE ...
- ol,ul,dl,table标签的基本语法
ol,ul,dl,table标签的基本语法 有序列表: 无序列表: 自定义列表: <ol> <ul> < ...
- 【JSP】<meta>标签用法
转载自:http://blog.sina.com.cn/s/blog_65c74cce0102v39z.html 非常感谢这位博主,急着用,改日再细细品味重新整理这篇博文. http-equiv M ...
- table标签
table标签使我们最常用的的标签,在使用table标签时我们要注意一些其属性,早期我们经常使用table标签对其进行页面布局但是现在我们基本不再使用,由此可见table标签也是非常强大的一个工具. ...
- dl标签和table标签
dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl> <dt>计算机</ ...
随机推荐
- JavaScript基础对象创建模式之私有属性和方法(024)
JavaScript没有特殊的语法来表示对象的私有属性和方法,默认的情况下,所有的属性和方法都是公有的.如下面用字面声明的对象: var myobj = { myprop: 1, getProp: f ...
- sorted 函数及小练习
python 中sorted函数 sorted() 函数对所有可迭代的对象进行排序操作. sorted 语法: sorted(iterable[, cmp[, key[, reverse]]]) 参数 ...
- linux磁盘容量不足的处理方案
在虚机上安装memcached时,突然发现磁盘空间不足. df -h 发现,磁盘一共12G,原来是新申请的虚机,磁盘分区没有挂载上. fdisk -l 查看磁盘,发现有 /dev/vdb1 /dev/ ...
- 设置overflow:hiden行内元素会发生偏移的现象
父级元素包含几个行内元素 <div id="box"> <p> <span>按钮</span> <span>测试文字文字 ...
- Tensorflow教程(3)什么是张量?什么是数据流图?
Tensorflow = Tensor(张量) + flow(数据流图) 1.张量 张量可不是“麻辣烫”!张量是一个很抽象的概念,直观的来说,张量在tensorflow中就像一个杯子,起到保存数据的作 ...
- opencv3.4.9 + armv7 + arm-linux-gnueabihf交叉编译
使用CMake指定交叉编译链会有很多报错,原因可能是其找交叉编译的库或这头文件会自动链接到本地的库或者头文件. 可以使用Qt设置好交叉编译环境后,将CMakeLists.txt文件放入,直接编译通过即 ...
- tidyverse|数据分析常规操作-分组汇总(sumamrise+group_by)
| 本文首发于 “生信补给站” https://mp.weixin.qq.com/s/tQt0ezYJj3H7x3aWZmKVEQ 使用tidyverse进行简单的数据处理: 盘一盘Tidyverse ...
- 二叉树的深度(剑指offer-38)
题目描述 输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. 递归解析: 思路: 从根节点出发,查询左子树的深度,获取右子树的深度 ...
- vue项目发布时去除console语句
在vue.config.js中添加下面的代码即可 // vue-cli version > 3 modeule.exports = { configureWebpack: config => ...
- 数据可视化之DAX篇(一)Power BI时间智能函数如何处理2月29日的?
https://zhuanlan.zhihu.com/p/109964336 今年是闰年,有星友问我,在Power BI中,2月29日的上年同期是怎么计算的? 这是个好问题,正好梳理一下,Power ...