HTML表格
【表格table】

表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示

th表示的是：表头。表头中的文字，默认为加粗居中。th要放在tr中，用于替换掉td。

【table的常用属性】
1、border：给表格加边框。 默认给所有td加边框，并且给整个table加外边框。 当增大border的值时，td上的边框不变化，只有最外层大边框变宽。
 
2、cellspacing：单元格与单元格之间的距离。
cellspacing="0" 表示单元格与单元格之间没有距离，但是边框线的宽度依然是两条线的宽度。
 
[注意] 表格边框合并的CSS写法：
style="border-collapse: collapse;"
这条CSS与cellspacing="0"有什么区别？
cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然还是两条线；
border-collapse: collapse; 是将表格相邻的两条边框进行合并处理，只有一条线存在。(一旦边框合并，cellspace属性将会失效。)
3、cellpadding：单元格中的文字与单元格边框的距离
4、 height：表格的高度
       width：表格的宽度
使用表格宽、高属性设置大小：
<table height="400" width="500"></table>
 
使用CSS样式设置大小：
<table style="height:400px; width:500px;"></table>
5、align：设置表格在浏览器中的位置。不建议使用了。
可选值：left 表格居左 /center 表格居中/right 表格居右
 
6、bgcolor：背景色
bordercolor:边框颜色
background:背景图
background="img/computer.jpg"
背景色和背景图同时存在时，背景图会覆盖背景色
 
 
【tr与td常用属性】
1、width：单元格宽度
     height：单元格的高度
 
2、bgcolor： 单元格的颜色
 
3、align:设置单元格中的文字，水平对齐方式。
left、center、right
valign:设置单元格中的文字，垂直对齐方式。
top、middle、bottom
 
4、 nowrap="nowrap" 当单元格文字过多时，设置单元格文字不断行显示。 但是，会把表格的宽度撑大!!!
【表格的跨行与跨列】
1、跨列：在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列，则，单元格右边的n-1个单元格需要去掉。
 
2、跨行：在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行，则，单元格下边的n-1个单元格需要去掉。
<body> 

<table border="1" cellspacing="0" style="border-collapse: collapse;" cellpadding="10" width="500" height="400" bgcolor="#FFA100">
<tr>
<th width="300" rowspan="3">1-1</th>
<th colspan="3">1-2</th>

</tr>
<tr>

<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>

<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>

</body>

HTML中表格的更多相关文章

  1. FineUIMvc随笔（6）对比WebForms和MVC中表格的数据库分页

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 通过对比WebForms和MVC中表格数据库分页代码的不同,可以对 MVC 中的数据流转有更加深入的了解. WebForms 中 ...

  2. Java读取word中表格

    因为要新建一个站,公司要把word表格的部分行列存到数据库中.之前用java操作过excel,本来打算用java从word表格中读取数据,再存到数据库中,结果因为权限不够,无法访问公司要写的那个数据库 ...

  3. 在vue中关于element UI 中表格实现下载功能，表头添加按钮，和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  4. element框架中表格的筛选功能使用说明（转载）

    一.element框架中表格的筛选功能使用说明 转载:https://blog.csdn.net/liangxhblog/article/details/80513030 在element ui 框架 ...

  5. DOM中表格的操作方法总结

    DOM中表格的操作方法总结 <table/>元素的方法如下: caption:指向<caption/>元素(如果存在): tBodies:<tbody/>元素的集合 ...

  6. jquery-easyui 中表格的行编辑功能

    具体实现代码如下: <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid ...

  7. 152-技巧-Power Query 快速合并文件夹中表格之自定义函数 TableXlsxCsv

    152-技巧-Power Query 快速合并文件夹中表格之自定义函数 TableXlsxCsv 附件下载地址:https://jiaopengzi.com/2602.html 一.背景 在我们使用 ...

  8. html中表格元素的相关总结

    表格元素相关总结: 1.在CSS中,内部表元素(如td.tr.col等)生成矩形框,这些矩形框包含内容.内边距和边框,但没有外边距,因此如果定义外边距,浏览器将忽略该定义:对于table元素,外边距有 ...

  9. html中表格的制作

    <table summar="给表格添加摘要".> <captioan> 给表格添加标题 </caption> <tr> <t ...

  10. jsp中表格，表格中的文字根据表格的大小自动换行

    style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word" 语法: word-break : ...

随机推荐

  1. [编织消息框架][netty源码分析]11 UnpooledHeapByteBuf 与 ByteBufAllocator

    每种ByteBuf都有相应的分配器ByteBufAllocator,类似工厂模式.我们先学习UnpooledHeapByteBuf与其对应的分配器UnpooledByteBufAllocator 如何 ...

  2. workday1

    前天是实习的第一天,现在补下感想 总的来说还是不错的,师兄很nice,师妹很羞涩,我很尴尬,我的交际能力还是有待提高(主要是普通话不标准~~~~(>_<)~~~~) 早上由华工C12穿梭到 ...

  3. java生成首字母拼音简码的总结

    百度找到了某论坛高人写的java(具体论坛记不清了),直接用来调用,再次非常感谢,基本上实现了我的需求 package MD5;import java.util.Scanner;public clas ...

  4. python编程快速上手之第9章实践项目参考答案

    本章介介绍了shutil,zipfile模块的使用,我们先来认识一下这2个模块吧. 一.shutil模块 shutil模块主要用于对文件或文件夹进行处理,包括:复制,移动,改名和删除文件,在shuti ...

  5. Python爬虫从入门到放弃（十一）之 Scrapy框架整体的一个了解

    这里是通过爬取伯乐在线的全部文章为例子,让自己先对scrapy进行一个整理的理解 该例子中的详细代码会放到我的github地址:https://github.com/pythonsite/spider ...

  6. jmeter-命令行执行脚本

    日常测试过程中发现,在大数量并发时,jmeterGUI界面时长宕机.卡死,在这种情况下我们就需要使用命令行来执行脚本了(非GUI), 命令行执行首先就必须要配置环境变量,如同JAVA-HOME一样,这 ...

  7. c/c++ SQLite3的常用使用方法;

    下面测试用的sqlite例子;大家可以参考使用; #include "CppSQLite3.h" Class TestSqlite{ //定义db指针 private: CppSQ ...

  8. Android handler 可能会造成内存泄露

    Android handler 可能会造成内存泄露 Android Studio 使用 Handler 时: private Handler handler = new Handler(){ @Ove ...

  9. ionic2+Angular ionScroll页面滑动监听

    第一:需要在组件中引入相关模块: 第二:如果只是监听页面滑动,只需要标注@ViewChild(Content) content: Content;就可以了. 附加:如果要监听页面的某个元素,并对其进行 ...

  10. (转)HashMap深入原理解析

    [HashMap]深入原理解析 分类: 数据结构 自考 equals与“==”(可以参考自己的另一篇博文) 1,基本数据类型(byte,short,char,int,long,float,double ...