表格是一种组织整理的数据的手段，在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表格的更多相关文章

  1. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  2. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  3. MiniUI动态添加table表格

    本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...

  4. table表格宽度固定，同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  5. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

  6. [js开源组件开发]table表格组件

    table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...

  7. jquery 生成table表格 部分代码

    想生成上面这样的table表格先看返回数据格式 <div id="create_img_tab"></div> window.onload = functi ...

  8. jquery隐藏table表格的某一列

    jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列

  9. asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL

    代码: /// <summary> /// HTML Table表格数据(html)导出EXCEL /// </summary> /// <param name=&quo ...

  10. bootstrap学习笔记<四>（table表格）

    表格 bootstrap为table表格定制多个常用样式:基本样式,隔行变色样式,带边框样式,荧光棒样式,紧凑样式,响应样式. ☑  .table:基础表格 ☑  .table-striped:斑马线 ...

随机推荐

  1. Python学习笔记day5

    模块 1.自定义模块 自定义模块就是在当前目录下创建__init__.py这个空文件,这样外面的程序才能识别此目录为模块包并导入 上图中libs目录下有__init__.py文件,index.py程序 ...

  2. LTE Module User Documentation（翻译4）—— 使用 Fading Trace

    LTE用户文档 (如有不当的地方,欢迎指正!) 7 使用 Fading Trace   本节描述如何在 LTE 仿真中使用 fading traces .   (1)生成 Fading Traces  ...

  3. 使用BAPI_ACC_DOCUMENT_POST，创建会计凭证，用BADI扩展字段（转）

    业务需求:和银行做一个接口,要通过银行流水产生会计凭证,会计凭证的事务码是F-02,查到了BAPI方法BAPI_ACC_DOCUMENT_POST.昨天测试发现,有一些参数在BAPI_ACC_DOCU ...

  4. HDU4801·二阶魔方

    题意:给定二阶魔方初始状态,问N(1 <= N <= 7)步旋转操作以内最多能使几个面相同. dfs搜索+剪枝. 魔方的每个旋转操作即对应于一个置换操作.又因为相对运动,上层左旋一次和下层 ...

  5. michael的沟通秘籍

    1 多准备几个邮件模板2 lower expectation over delivery less promise extra give3 involve resource earliar 尽早接手公 ...

  6. linux笔记：linux常用命令-压缩解压命令

    压缩解压命令:gzip(压缩文件,不保留原文件.这个命令不能压缩目录) 压缩解压命令:gunzip(解压.gz的压缩文件) 压缩解压命令:tar(打包压缩目录或者解压压缩文件.打包的意思是把目录打包成 ...

  7. Gradle 教程：第一部分，安装【翻译】

    原文地址:http://rominirani.com/2014/07/28/gradle-tutorial-part-1-installation-setup/ 在这篇教程里,我们将主要讲解如何在我们 ...

  8. HTML5自学笔记[ 24 ]canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. alpha发布（技术随笔）

    昨天是班级里面每个小组要进行alpha演示,大家都很努力的去做自己的项目.我们nice!组没有演示自己的项目,只一点很惭愧,身为组员没有协助组长按时完成项目,这一点自己也感觉很抱歉,虽然每天感觉自己都 ...

  10. 初学java之常用组件

    import javax.swing.*; import java.awt.*; class Win extends JFrame { JTextField mytext; // 设置一个文本区 JB ...