table表格
表格是一种组织整理的数据的手段，在div布局还未流行是，也用来布局，一个表格包含了表格整体、表格头部。每个表格均有若干行，每行被分为若干单元格。
在HTML中表格使用table标签来定义，行由<tr>标签定义,单元格由<td>标签定义，字母td指表格数据（table data），即数据单元格的的内容，另外还有th代表了表格的表头，表格可以包含文本、图片、列表、段落、表单、水平线、表格等等，因此表格也可以用作布局。
表格由<table>标签来定义，每个表格均有若干行（由<tr>标签定义），每行被分为若干单元格（由<td>标签定义）。table>tr>td
结构
表格table
行 tr
单元格 td
表头 th 他是内容加粗的单元格
表格的标题 captain 标题会被居于表格之上
属性
边 border，定义border边框
跨行 rowspan="跨几行就写数字几"
跨列 colspan="跨几列就写数字几"
宽 width，table和td都可以设置宽
高 height，td科设置高
排列属性 align，科居中显示表格
thead tbody tfoot
对于结构复杂的表格，可以将表格分割成三个部分：
thead 表格的头 用来放标题之类的
tbody 表格的身体 放数据本体
tfoot 表格的脚 防表哥的脚注之类
这三个标签的作用是：为了让表格在下载的时候可以分段显示，就是浏览器解析HTML时，table是作为一个整体来解释的，而使用tbodt标签后，tbody标签中的内容可以优先显示。
它与th、tr、td、有明显的区别，使用thead， tbody， tfoot 是为了控制显示顺序。无论他们的顺序如何改变，<thead>内的元素总是在表的最上面，<tfoot>总是在标的最下面。
怎么把table中双线的边框变单线
1 双线是因为给table加了边框后也会自动给单元格加上边
2 单元格之间有间距，所以呈现出空隙
3 去掉单元格之间的空隙和内边距
cellspacing=“0” 单元格（td）之间的间距
cellpadding=“0” 单元格之间的内边距 例子：
<table border="1" cellspacing="0" cellpadding="0"></table>
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<br /><br /><br /><br />
<table border="1" width="800" align="center">
<tr>
<th colspan="8">湖南省汇总表</th>
</tr>
<tr>
<td rowspan="3">学校名称</td>
<th colspan="6">项目类别</th>
<td rowspan="3">经费小计</td>
</tr>
<tr>
<td colspan="2">建筑</td>
<td colspan="2">设备</td>
<td colspan="2">其他</td>
</tr>
<tr>
<td>数量</td>
<td>经费</td>
<td>数量</td>
<td>经费</td>
<td>数量</td>
<td>经费</td>
</tr>
</table>
</body>
</html>
显示如下：
table表格的更多相关文章
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- MiniUI动态添加table表格
本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...
- table表格宽度固定，同时td内容过长也不会被撑开
table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}
- Bootstrap Table表格一直加载(load)不了数据-解决办法
bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...
- [js开源组件开发]table表格组件
table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...
- jquery 生成table表格 部分代码
想生成上面这样的table表格先看返回数据格式 <div id="create_img_tab"></div> window.onload = functi ...
- jquery隐藏table表格的某一列
jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列
- asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL
代码: /// <summary> /// HTML Table表格数据(html)导出EXCEL /// </summary> /// <param name=&quo ...
- bootstrap学习笔记<四>（table表格）
表格 bootstrap为table表格定制多个常用样式:基本样式,隔行变色样式,带边框样式,荧光棒样式,紧凑样式,响应样式. ☑ .table:基础表格 ☑ .table-striped:斑马线 ...
随机推荐
- .net中类型转换的案例
.net中三种数据类型转换区别((int),Int32.Parse() 和 Convert.toInt32() )(typename)valuename,是通用方法: Convert类提供了灵活的类型 ...
- E2 2014.6.3 更新日志
增加功能 增加支持中关村获取商品信息 增加个人业绩查询功能 增加赠送和获赠查询功能 增加商品历程分析报表,资金历程分析报表,科目明细分析报表, 销售分析报表 增加服务维修明细表查询报表 完善功能 固定 ...
- 使用ultramon调整任务栏高度
取消锁定,调整任务栏的高度为一行图标的高度,然后再锁定即可.为啥程序没有默认设置?
- Generator 函数的含义与用法
Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权(即暂停执行). function* gen(x){ var y = yield x + 2; return y; } ...
- js学习笔记-编写高效、规范的js代码-Tom
编写高效.规范的js代码: 1.变量命名空间问题,尽量使用局部变量,防止命名冲突(污染作用域中的全局变量):全局空间命名的变量可以在对应的文档域任意位置中使用window调用. 2.尽量使用单var定 ...
- poj2986A Triangle and a Circle&&poj3675Telescope（三角形剖分）
链接 2986是3675的简化版,只有一个三角形. 这题主要在于求剖分后三角形与圆的相交面积,需要分情况讨论. 具体可以看此博客 http://hi.baidu.com/billdu/item/703 ...
- JAVA入门 第五周 1多项式
1 多项式加法(5分) 题目内容: 一个多项式可以表达为x的各次幂与系数乘积的和,比如: 现在,你的程序要读入两个多项式,然后输出这两个多项式的和,也就是把对应的幂上的系数相加然后输出. 程序要处理的 ...
- (四)Ubuntu 14.04 文件服务器--samba的安装和配置
samba是Linux系统上的一种文件共享协议,可以实现Windows系统访问Linux系统上的共享资源,现在介绍一下如何在Ubuntu 14.04上安装和配置samba一. 一.更新源列表 打开&q ...
- 彻底理解ThreadLocal
ThreadLocal是什么 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地 ...
- Handler详解系列(四)——利用Handler在主线程与子线程之间互发消息，handler详解
MainActivity如下: package cc.c; import android.app.Activity; import android.os.Bundle; import android. ...