关于table排版

colspan和rowspan这两个属性用于创建特殊的表格。

colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数：

在浏览器中将显示如下：

单元格1
单元格2 单元格3 单元格4

该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspan设为“2”，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元格，以确保两行占据相同的列数。

该例在浏览器中将显示如下：

单元格1 单元格2
单元格3 单元格4 单元格5

rowspan的作用是指定单元格纵向跨越的行数。

浏览器中将显示如下：

单元格1 单元格2
单元格3
单元格4

上例中的单元格1，其rowspan被设为“3”，这表示该单元格必须跨越三行（本身一行，加上另外两行）。因此，单元格1和单元格2在同一行，而单元格3和单元格4形成独立的两行。

综合实例

ss
　 　 　 　
　 　 　 　
　 　 　
　 　
　 　 　 
 1 <html>
 2 <head>
 3 </head>
 4 <table border= "1 "   width= "200 " >
 5     <tr>
 6         <td colspan="4"  >ss
 7         </td>
 8     </tr>
 9     <tr>
10         <td   width= "25% "> 　 </td>
11         <td   width= "25% "> 　 </td>
12         <td   width= "25% "> 　 </td>
13         <td   width= "25% "> 　 </td>
14     </tr>
15     <tr>
16         <td   width= "25% "rowspan="2"> 　 </td>
17         <td   width= "25% "> 　 </td>
18         <td   width= "25% "> 　 </td>
19         <td   width= "25% "> 　 </td>
20     </tr>
21     <tr>
22         <td   width= "25% "> 　 </td>
23         <td   width= "25% " rowspan="3"> 　 </td>
24         <td   width= "25% "> 　 </td>
25     </tr>
26     <tr>
27         <td   width= "25% " colspan="2"  > 　 </td>
28         <td   width= "25% "> 　 </td>
29     </tr>
30     <tr>
31         <td   width= "25% "> 　 </td>
32         <td   width= "25% "> 　 </td>
33         <td   width= "25% "> 　 </td>
34     </tr>
35 </table>
36 </html>

table自定义样式设置：border-collapse: collapse;   

时间： 2024-10-29 10:45:44

关于table排版的相关文章

web网页的表单排版利器--960css

http://www.cnblogs.com/birdwawe/p/4062106.html 表单排版样式 960css 前言 一般web网页的表单排版,大家都习惯用table排版,自己需要根据实际需要去定义TR和TD,很多时候对于TD的高宽度.是否合并行,合并列,都要去做一些处理,这些都是比较繁琐的工作.找到一个表单排版的替代工具,提前定义好CSS样式,无疑可以减轻我们的这些工作. 下面简单一个一个表单排本CSS框架,960css. 960css目录结构 (其中960分为fixed和fluid

（11）网页样式综合案列---灵活的电子相册 {上}

本篇学习资料讲解:       通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片(或者某段文字)时,相应的文字(或者相应的某张图片)会以特殊样式显示} 以上部分的介绍将出现在(12)网页样式综合案列---灵活的电子相册 {下},这里只是提前感受. 1.搭建基本框架 搭建框架主要应考虑在实际页面中相册的具体结构和形式,包括照片整体排列的方法,用户可能的浏览情况,照片是否需要自动调整,等等.

子数涵数&#183;DW——网页制作的流程

PS:这是我很早以前的一个废掉的项目. 当时用的还是table排版,现在基本都是div了吧. 这个项目前段时间,我还抢救过一次,后来还是放弃了. 先行.网页制作的流程分为哪些呢? 一.网站策划(当时,我做的是一个ppt) 二.页面美工 1.小图绘制 2.整体图片 3.切割图片 三.网页制作 补充:后来抢救时的效果 1.index页面 2.main页面

Web客户端经验：

项目经验:1.如果设置外边距margin 父级元素也跟着移动,把父级元素设置触发BFC环境,overflow:hidden如果直接再子类哪里吧margin改成padding,这样自己内容相对于自己的位置就变了 2.引用外部文件 ./ 代表上一级(父级目录) ../代表上两级 3.调位置,一定是用margin和padding,不到万不得已不用定位,定位本身有效率和兼容性问题 4.样式都用.class,#id留给JS用 在做项目的时候,先确定结构,在确定框体,把元素加进去,基本的主框都加上触发BFC

div中嵌套div速度将会同样很慢

---恢复内容开始--- div中嵌套了div速度将会同样很慢   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div+css的形式做出的网站也没见他们做过什么优化,甚至连文章都没更新过.这是外话,我们就来谈谈难道真的用div+css制作出来的网站就打开速度就快,对搜索引擎就友好吗?关于div+css的优点其实确实很多,这种布局方式大大精简了页面的代码量,减少了网页的体积,有利于网页的读取.而table的排版方式最

py知识(每日更新) 8.7

html - 块级标签 列表 ul 无序列表 属性type:disc(默认)\square(实心方形)\circle(空心圆)\none(不显示样式) <!--设置不显示任何样式--> <ul type="none"> <li>手机</li> <li>电脑</li> <li>其他电器</li> </ul> <!--设置显示实心方块--> <ul type=&qu

Libgdx之Table 表格排版

做游戏的时候一般都会有一个菜单屏,里面有各种选项如:静音.调节声音大小.帮助.游戏介绍.这时候我们就需要对各个按钮或者演员来排序,Table就是一个能很好帮助我们进行排序的工具. Table extends WidgetGroup 我们可以知道Table继承自Group,我们进行排序的时候也可以赋予简单的动作,如做一个Button切换的动画等等. 当用tabel.add(T actor)方法时返回一个Cell,cell里面定义了各种属性来进行操作,可以调整单元格和单元格之间的距离,也可以调整单元

现在主流网站为什么都用div+css布局而不是用table

由于刚刚接触前端,一直觉得table布局在代码上看起来比div+css更整洁,div+css布局的页面,一堆的<div><div><div>...</div></div></div>看起来都让人犯密集恐惧症,那么为什么现在的主流网站还都乐此不疲呢?为什么div+css反而成了一种主流布局方式呢?一直对此不解.这篇文章好像是解决了我的问题,先摘录过来,以便查阅. 以下内容摘自:http://www.divcss5.com/wenji/w

网站前端_Bootstrap.基础入门.0002.排版/列表/表格/表单/按钮/图像?

通用技能: # 文档类型 <!DOCTYPE html> <html lang="zh-cn">     <!-- Html Code --> </html> 说明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性. # 移动先行 <meta name="viewport" content="width=device-width, initi