html之table标签
简单的html表格,由table元素以及一个或多个tr,th,td元素组成。
tr:定义表格行
th:定义表格头
td:定义表格单元
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
可选属性:
align:
- left 字体靠左,右,居中
- center 字体靠右
- right 字体靠居中
bqcolor:表格背景色
- rgb(x,x,x)
- #xxxxxx
- colorname
border:表格边框的宽度
cellpadding:单元格边缘与其内容之间的距离
- pixels
- %
cellspacing:单元格之间的空白
- pixels
- %
示例代码:
<body>
<table border="" cellpadding="" cellspacing="">
<thead>
<tr>
<th>第一列</th>
<th align="left">第二列</th>
<th bgcolor="aqua">第三列</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1 col1</td>
<td>row1 col2</td>
<td>row1 col3</td>
</tr>
<tr>
<td>row2 col1</td>
<td>row2 col2</td>
<td>row2 col3</td>
</tr>
<tr>
<td>row3 col1</td>
<td>row3 col2</td>
<td>row3 col3</td>
</tr>
</tbody>
</table>
</body>
上图看看:
效果怎么样呢?
再看看边框属性吧:
fram:外侧边框哪个可见
- void 外边框四边不见了
- above 仅上边框可见
- below 仅下边框可见
- hsides 仅上下边框可见
- lhs 仅左边框可见
- rhs 仅右边框可见
- vsides 仅左右边框可见
- box 四边均可见
- border 单元格边框可见
rules:内侧边框哪个可见
- none 无内侧边框
- groups 仅上边框可见
- rows 仅行间边框可见
- cols 仅列间边框可见
- all 内边框均可见
表格的概要与宽度
summary:表格的概要
width:表格的宽度
- %
- pixels
再看看其它表格效果吧:
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="" cellpadding="" width="800px" bgcolor="#5f9ea0">
<tr>
<th>机型</th>
<th>CPU</th>
<th>内存</th>
<th colspan="">描述信息</th>
</tr>
<tr>
<th rowspan="">DELL2950</th>
<td>.4GHZ</td>
<td>16GB</td>
<td>
<p>CPU坏了一颗</p>
<p>工程师明上午来修</p>
</td>
<td>
<table border="">
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>孔扎根</td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>.4GHZ*</td>
<td>16GB</td>
<td>
<ul>
<p>花费详单</p>
<li>服务器5800块</li>
<li>两颗CUP共1万块</li>
<li>内存花了4000块</li>
</ul>
</td>
<td>200GB</td>
</tr>
<tr>
<th>DELL5800</th>
<td>.4GHZ*</td>
<td>32GB</td>
<td>800GB</td>
<td>800GB</td>
</tr>
<tr>
<th>DELL9700</th>
<td>.4GHZ*</td>
<td>128GB</td>
<td>2TB</td>
<td>2TB</td>
</tr>
</table>
</body>
</html>
解释图:
最终效果图:
html之table标签的更多相关文章
- python处理html的table标签
转载:http://www.xuebuyuan.com/583071.html python处理html的table标签 2012年01月06日 ⁄ 综合 ⁄ 共 5279字 ⁄ 字号 小 中 大 ⁄ ...
- ol,ul,dl,table标签的基本语法
ol,ul,dl,table标签的基本语法 有序列表: 无序列表: 自定义列表: <ol> <ul> < ...
- HTML——表格table标签,tr或者td
表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...
- table标签
table标签使我们最常用的的标签,在使用table标签时我们要注意一些其属性,早期我们经常使用table标签对其进行页面布局但是现在我们基本不再使用,由此可见table标签也是非常强大的一个工具. ...
- dl标签和table标签
dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl> <dt>计算机</ ...
- PHP自学4——通过函数将数组数据输出到html的Table标签中(使用函数的例子)
这一节其实说实话并没有什么干货,不过为了防止PO主的懒癌的复发,还是坚持放一点东西,即使是内容和长度都令人发指.这一节通过一个函数来实现将数组中的内容输出html的Table标签当中显示. 函数文件— ...
- PHP自学3——在html的<table>标签中显示用户提交表单
为了更好地显示用户提交表单,本节将在上一节的基础上将读取的用户表单显示在html的<table>标签中,这一节将用到和数组有关的知识. 本节代码将从外部文件(.txt文件)中读取信息于指定 ...
- display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
- 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性
区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...
- <table>标签总结(colspan跨列 ,rowspan跨行)
table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...
随机推荐
- Error Handling and Exception
The default error handling in PHP is very simple.An error message with filename, line number and a m ...
- iOS LaunchScreen启动图设置
新建的iOS 项目启动画面默认为LaunchScreen.xib 如果想实现一张图片作为启动页,如下图 如果启动不行 记得clear 一下工程 是启动页停留一段时间 只需要在 AppDelegat ...
- CF700C (枚举+tarjan)
Problem Break up (CF700C) 题目大意 给一张n个点,m条边的无向图,有边权,和起点S,终点T. (n<=1000 , m<=30000) 要求最多割掉2条边,使得S ...
- 解决:子元素设置margin-top,父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...
- 2016年11月3日JS脚本简介数据类型: 1.整型:int 2.小数类型: float(单精度) double(双精度) decimal () 3.字符类型: chr 4.字符串类型:sting 5.日期时间:datetime 6.布尔型数据:bool 7.对象类型:object 8.二进制:binary 语言类型: 1.强类型语言:c++ c c# java 2.弱类型语
数据类型: 1.整型:int 2.小数类型: float(单精度) double(双精度) decimal () 3.字符类型: chr 4.字符串类型:sting 5.日期时间:datetime 6 ...
- Http方法:Get请求与Post请求的区别
Get是向服务器发索取数据的一种请求,而Post是向服务器提交数据的一种请求Get是获取信息,而不是修改信息,类似数据库查询功能一样,数据不会被修改Get请求的参数会跟在url后进行传递,请求的数据会 ...
- C++学习笔记2:关于开发
一.简单的开发流程 (1)定义要被解决的问题: 明确定义待被解决问题,比如具体实现什么功能等. (2)设计解决问题的方法: 好方法的有哪些特点: 1.方法明确: 2.规范化:(已被验证过) 3.模块化 ...
- 纯 CSS 创建一个三角形
[要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...
- WinEdt和TeXworks编辑LaTeX文件乱码问题
WinEdt默认使用的是系统编码,windows下可以认为是 GBK编码,而TeXworks默认使用的是UTF8编码,所以要统一这两个编码,才能保证两个文件互相打开不会乱码. 具体方法如下: 一,可以 ...
- (基础篇)PHP与JavaScript交互
一.了解javascript Javascript是脚本编程语言,支持WEB应用程序的客户端和服务器端构件的开发,在WEB系统中得到了非常广泛的应用. 1. 什么是javascript Javascr ...