html中表格细边框的四种实现及其比较

第一种

使用css

第二种,使用ie中特有的属性,不支持除ie外的浏览器

第三种，整个表格的背景为黑色，每个单元格背景为白色，单无格间距为1,表格粗细为0

背景设置式－细边框表格
text	text
text	text

第四种啥也不说了，直接代码表示(一个style="BORDER-COLLAPSE:collapse"搞定)

比较：

第一种和第四种支持ie和ff但是第四种更简单一些

第三种也支持所有浏览器，但实现起来比较麻烦，很痛苦

第二种虽然实现简单但是兼容性差，只支持ie

第四种自我感觉最好用

HTML和CSS做模拟表格对角线网页教程

仅供新手参考学习，欢迎大家提出更多的实现方法。 < html xmlns="https://www.360docs.net/doc/f92042153.html,/1999/xhtml"> < head> < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title>模拟表格对角线 < style type="text/css"> *{padding:0;margin:0;} caption{font-size:14px;font-weight:bold;} table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;} th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;} th{background:#D6D3D6;} /*模拟对角线*/ .out{ border-top:40px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/ width:0px;/*让容器宽度为0*/ height:0px;/*让容器高度为0*/ border-left:80px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/ position:relative;/*让里面的两个子容器绝对定位*/ } b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;} em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;} .t1{background:#BDBABD;} < /style> < /head> < body>

HTML5表格制作源代码

HTML5表格制作源代码（姬岚洋）代码：

用div+css模拟表格对角线
类别姓名	年级	班级	成绩	班级均分
张三	三	2	62	61

实验三+用HTML表格进行网页排版

淮海工学院计算机工程学院实验报告书课程名:《Web应用开发技术》题目：实验三HTML表格进行网页排版班级：学号：姓名：评语：成绩：指导教师：批阅时间：年月日

实验三用HTML表格进行网页排版一实验目的 ●掌握HTML文档的结构； ●掌握常用的有关文本的标记及其属性； ●掌握img标记及指定src属性的方法； ●熟悉W3C HTML Validator进行网页合法性验证的一般方法。二实验内容和要求实验内容: 1.创建名为ex3的文件夹，在该文件夹里面创建一个网页文件sales.html，网页的标题为“ACME 公司2013年销售输入”，使用HTML 4 Transitional文档类型声明，使用合适的表格标记及属性显示ACME公司2013的5种产品4个季度的销售额。显示效果如下（单元格数据为随机值）：产品/季度一季度二季度三季度四季度Helix 20000 565454 5654 334543 X-Super 32345 34655 4345 34534 Compact2x 234324 7876 53434 43543 MiniXooper 7867 5465 6763443 354366 2.使用表格对教材64页图2-26的表单使用表格进行布局，保存为profile.html。 3.使用W3C在线HTML验证工具验证上述文档的合法性，修改验证结果中出现的错误。实验要求：（1）需要每个同学独立完成所有的实验步骤，（2）要求使用label标记对相关的表单元素进行说明，即：Label （3）下课之前将实验报告的电子文档提交至教学平台。三实验步骤第一题：

Html的table边框技巧 - HTML表格Table 边框样式美化

运用 CSS 语法美化表格 Table
注：除非特殊声明，本文所举各例插入的表格的 cellspacing、cellpadding、border 值均为 0。例一：1px 表格
很多人热衷于制作 1px 表格，于是发明了各式各样的方法，用 css 做起来可就灵活的多。如果要制作一个 1x1 的 1px 表格只要简单定义一下边框值就可以了。我们首先用 Dreamweaver 插入一个 1x1 表格，宽度为 50，然后在该表格 table 或者 td 中定义 border:1 solid teal,所做的表格的效果如下：
但是要制作一个非 1x1 的表格（如 2x2）就稍微麻烦些，因为如果直接定义 td 样式 border:1 solid teal ，则显示的效果如下：
你会发现表格外框为 1px，而里面则变成了 2px 了，这是由于叠加的原因。为了解决这么问题我们可以这样做：首先为 td 定义样式：border:#cc0000 solid;border-width:0 1 1 0,这样表格表现为：
然后再为 table 定义样式:border:#cc0000 solid;border-width:1 0 0 1,这样就可做作成一个完整的 1px 表格了。
例二：粗边框的 1px 表格

此表格的内格线为 1px 而外边框为 3px，有了例一的基础做起来就不难了，只要修改 border-width 值就行了。对 table 所使用的样式的代码是：border:blue solid;border-width:3 2 2 3 对 td 所使用的样式的代码是：border:blue solid;border-width:0 1 1 0 例三：虚线框表格
做法和例一类似，border-style 从 solid 改为 dashed。对 table 所使用的样式的代码是：border:black dashed;border-width:1 0 0 1 对 td 所使用的样式的代码是：border:black dashed;border-width:0 1 1 0 例四：点线边框表格
注意点线（dotted）的最小象素为 2。对 table 所使用的样式的代码是：border:green dotted ;border-width:2 0 0 2 对 td 所使用的样式的代码是：border:green dotted;border-width:0 2 2 0 例五：双线边框表格
注意双线（double）的最小象素为 3。对 table 所使用的样式的代码是：border:teal 4 double 对 td 所使用的样式的代码是：border:teal 1 solid 例六：outset 外框表格

Html细线表格的实现

Html细线表格的实现在网页制作中，我们常常会使用到表格，表格使得需要表达的信息更清楚，明了。

Student Information Table
student information table
name	sex	student_ID	hobbies
Total numbers of the students:			3
姬岚洋	male	131407209	Play basketball,Watch TV series
吴婷	female	131407210	Love Ji Lanyang,marry Ji Lanyang
白新	male	131407201	Like study,Play football

1.1	1.2
2.1	2.2

这段代码定义了border = 1pix的表格，但实际上表格的实际边框宽度为2pix, 这是因为表格边框由：表格外边框和单元格边框两部分构成。那么如何定义一个细线表格(实际边宽为1pix) 呢？ 1. 使用cellspacing和背景色技术: 例子一：

1.1	1.2
2.1	2.2

例子二：

3	3
2	2

html网页表单制作

1.表单标签＜form＞……＜/form＞语法：＜FORM name=“form_name” ACTION=“URL”METHOD=“GET|POST”＞…＜/FORM＞ Name ：定义表单的名称 Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；Action ：用来指定表单处理程序的位置(asp 等服务器端脚本处理程序） 2.文本框文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。代码格式：＜input type=“text” name=“...” size=“...” maxlength=“...” value=“...”＞ type=“text”定义单行文本输入框； name 属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称； size 属性定义文本框的宽度，单位是单个字符宽度； maxlength 属性定义最多输入的字符数。 value 属性定义文本框的初始值 3.密码框密码框是一种特殊的文本框，它的不同之处是当输入内容时，均以*表示，以保证密码的安全性。格式： 4. 按钮类型：普通按钮、提交按钮、重置按钮。 1)普通按钮当type 的类型为button 时，表示该输入项输入的是普通按钮。语法格式： 3)重置按钮当type的类型为reset时，表示该输入项输入的是重置按钮，单击按钮后，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。语法格式： 5. 单选框和复选框单选框格式： Checked: 表示此项默认选中 Value 表示选中后传送到服务器端的值。 Name 表示单选框的名称，如果是一组单选项，name 属性的值相同有互斥效果。复选框语法格式：

HTML表格边框制作教程

HTML表格边框制作教程作者：灵子表格以

和

分别作起始标识符。其中，里有一些必要的参数，为容易理解起见，在这里只介绍本节用到的参数，其他的参数今后将陆续提到。border参数定义表格边框的粗细，记为border=数值，数值取0，1，2，3等整数。width是我们要定义的参数，它规定表格的宽度，数值通常用100%，记作width=100%，值得注意的是，如果不设置width值，表格将根据单元格里的内容自动定义宽度。height 参数规范表格的高度，通常可以不设置，而是让内容的多少让系统自行设定。

和

之下，还需要由两个成对的标识符号定义表格的行、列，它们分别是……， ……，tr标识符定义表中的行，td标识符定义数据表元，即每行中的每一列。……要包含在……里面。此外，论坛要求在下有（表体），它也是成对出现，包含...。一张完整的表格全部语法如下：

Hello Table

效果如下：表格边框的修饰上一讲我们讲到border属性，border即为边框，除了有粗细的数值定义以外，还有其他的属性哦。我们先来看看亮边框的颜色和暗边框的颜色设置。亮边框记作bordercolorlight，暗边框记作bordercolordark。它们的数值可以用red、green、blue等表达，也可以用#11ee00这样的方式来表达，比如：bordercolorlight=red，bordercolorlight=#808000。请看下面的表格：以上表格的全部代码清单如下：

html表格中图片铺满

竭诚为您提供优质文档/双击可除html表格中图片铺满篇一：html表格布局实例 [html]表格布局之实例版 |[>] 前面我们讲了html表格的基础知识，今天我们通过一个实例让大家更清晰的了解下表格的用途。例如：我们做一个简单的网站布局，代码如下： bordercolor="#00ff99"> 网站名称网站标题搜索框左边中间右边

网站底部信息产生如下的表格：这是一张整体的表格，第一行和第四行分别跨度了三列，这里用 colspan="3"来限制，而第二行的“搜索框”占用了两列的位置，用colspan="2"控制；align="center"是对表格内文字的对齐限制，center表示中间，right表示靠右，left 靠左。表格的基础设置，可以参考： [html]利用表格规划网站布局 [html]如何制作多行多列的表格 [html]设定表格的尺寸和边框如果你现在可以根据自己的想法制作出一个表格了，那么你就是向自己制作模板迈近了一步。^o^ 表格布局现在仍然很多人在用，方便实在。网页设计现有两种布局方法，一种即是表格布局，另一种是现在w3c极力推荐的css布局。不过，就目前来说，由于xhtml并未完全占据主流，表格布局依然是大多数网页设计师的首选。

你所描述的问题属于表格的对齐问题，解决方式有以下几种：如果两个表格的宽度不一致，那么选择默认的对齐方式，也即左对齐，在html中的标签和属性是：就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式，例如居中对齐，而第二个表格并没有设置对齐方式，所以默认为左对齐，这样就出现了上述问题。我的一些表格布局的经验： 1、表格布局第一步：先插入一个表格，宽度是760-780px （记住，一定要用px，不要用百分比），高度不用设置，然后令这个表格居中。以后所有的内容都限制在这个表格中。 2、熟练使用表格嵌套。也就是说，在一个表格中再插入另一个表格。举个例子，把你要设计的页面分成大的几个部分，然后利用表格的行数和列数来控制它们的布局，如果某一个单元格中的内容又要分成几部分，可以继续在这个单元格中插入表格，方法同上。 3、补充：表格的边框一定要为0，即table中的border 属性值为"0"。也就是让表格在网页预览中不可见，这样才能实现表格布局的目的。如何利用表格实现画中画，也就是页中页效果网页的排版大多使用表格，利用一个表个单元可以嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更

html,表格,位置

竭诚为您提供优质文档/双击可除 html,表格,位置篇一：html表格布局实例 [html]表格布局之实例版 |[>] 前面我们讲了html表格的基础知识，今天我们通过一个实例让大家更清晰的了解下表格的用途。例如：我们做一个简单的网站布局，代码如下： bordercolor="#00ff99"> 网站名称网站标题搜索框左边中间右边

html,table表格模板

竭诚为您提供优质文档/双击可除html,table表格模板篇一：html表单布局及css样式 html（二）一、html中的特殊符号 1.常用的特殊符号：特殊符号字符实体示例空格ab 大于号>>a 小于号引号 """copyrightallReserved 2.表单（标签） 2.1、表单的基本语法：

action：规定到表单提交之后，由谁处理，默认为当前页面method：有两种取值get和post（更安全，数据量更大）表单内部由大量表单元素构成 2.2、表单元素的基本格式 checked="checked(是否被选中)"/> 2.3、表单元素的逐一介绍 1、文本框（type:txt） 2、密码框 3、重置、提交和普通按钮 4、单选按钮（radio）男女 5、复选框（check和post）运动游泳

value="play"checked="checked"/>玩游戏6、文件域（上传文件） 7、下拉列表框一月二月三月四月五月六月七月八月九月十月十一月十二月月 8、多行文本域

欢迎阅读服务协议 9、隐藏域 10、只读和禁用属性 a、只读欢迎阅读服务协议 b、禁用同意以上协议 3.html的注释要避免在注释内容中使用(不规范) 可以用==或者##代替 -- 4、表格布局 4.1、基本语法 //行

百度//单元格猫扑 4.2、跨列学生成绩//跨两列 4.3、跨行李四 4.4、跨行跨列学生成绩 5、表格的高级标签表格数据的分组标签,, 6、表格布局采用form-table-tr-td进行页面布局 7、css样式表 css是cascadingstylesheets的缩写，层叠样式表（w3c 规范之一），把网页的内容和外观的美化分开。优点： a、实现内容和样式的分离，利于团队开发 b、实现样式复用，提高开发效率。

表格HTML代码一览表

表格HTML代码一览表 html特效代码 html表格制作表格算不上什么特效，但在空间却很有用处。如果使用专门的工具，制作一张表格是轻而易举的事，但这类工具一下子不容易学会，下面介绍html表格如何手工制作。 1、最基本的表格代码：

第1行第1列	第1行第2列
第2行第1列	第2行第2列
第3行第1列	第3行第2列

2、表格的代码非常整齐，也很有规律，我们只要学会使用并能够作一些简单修改就行了。上面是一张3行2列的表格，如果把它改成4行3列，怎么改呢？我们可以将代码通过复制、

代码：

第1行第1列	第1行第2列	第1行新3列
第2行第1列	第2行第2列	第2行新3列
第3行第1列	第3行第2列	第3行新3列
新4行新1列	新4行新2列	新4行新3列

3、下面是一张4行4列的表格，请把它改成2行3列的表格，自己试一试吧。代码：

html表格设计

. 学告生实验报学院：课程名称：专业班级：姓名：学号：

学生实验报告学生姓名学号同组人：无实验项目HTML表格设计 □必修■选修□演示性实验□验证性实验■操作性实验□综合性实验实验地点H113 实验仪器台号 1 台指导教师钟元生实验日期及节次2011-4-15 上午1.2.3 节课一、实验综述 1、实验目的及要求目的： 1. 掌握HTML 语言主要标记符的含义。 2. 掌握使用HTML 语言进行简单的表格设计； 2、实验仪器、设备或软件仪器设备：电脑一台二、实验过程（实验步骤、记录、数据、分析） 1. 使用记事本建立HTML 的实验过程：（1）在桌面上新建一个记事本，并且命名为“dxh.txt”，点击该记事本打开输入下列代码：电子商务
Banana Apple Orange (2)在记事本中编辑的代码截图如下：

（3）将记事本中的文件另存为“dxh.html”，注意在存储的时候一定要带双引号。用浏览器打开刚刚存的html 文件，截图如下： 2. 列表框标签select的小实验：（1）在记事本文件中键入一下代码：电子商务

第1行第1列

第1行第2列

第1行第3列

第1行第4列

Company	Contact	Country
Apple	Steven Jobs	USA
Baidu	Li YanHong	China
Google	Larry Page	USA
Lenovo	Liu Chuanzhi	China
Microsoft	Bill Gates	USA
Nokia	Stephen Elop	Finland

html-5 表格的制作

教学项目五 HTML中表格的制作【教学内容】讲解HTML中制作表格的标志【教学目的】使学生掌握简单表格的制作【教学重点】表格中单元格的合并操作【教学难点】理解属性rowspan与colspan的含义【教学方式】案例分析式、项目教学【教学参考】 1．HTML网页制作教程材义语编著铁道出版社 2、HTML基础与实例程耀编著电子工业出版社一、表格基本标志 (1)

(2) (3) (4)

用来创建一个表格框架创建表格的一行创建表格一行中的一个单元格它们的对应关系如下:

第一行第一列

第一行第二列

第一行第三列

第一行第四列

用于定义表格头例1. 在网页中制作表格:

表格制作

表格例子

		F
F	F
	F	F