table&表格的一些属性
将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。HTML
具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的修饰，从而使网页更加生动活泼。HTML
表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。
　　表格在网页设计中的地位非常重要，可以说如果您表格用不好的话，就不可能设计出出色的网页。大多数初学者一开始就接触表格，对表格都有一定的了解，但是要实现真正细致甚至强大的功能，仔细理解table的代码结构至关重要！我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题，了解和掌握了这些内容，你将发现，table原来是这样的亲切易用!
　　一、创建基本的表格
　　一个表由＜table＞开始， ＜/table＞结束，表的内容由
＜tr＞,＜th＞和＜td＞定义。＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名
称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和 ＜th＞组成的表格。
　　表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。
　　在讲解之前，我们先来看看表格的基本构造。 下图是一个3行3列的表格。
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/middle/8bd0dedagad04d563b8c3&690" TITLE=""
ALT="table&表格的一些属性" />&
　　这里面有两个概念要弄明白：表格与单元格。他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。前面已经说过表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这样一个概念：描述整个表格的属性标记放在＜table＞里，描述单元格的属性标记放在＜tr＞、＜td＞里。
有这样一个概念后，我们学习起来就可能简单些。
1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色
　　表格以及单元格的大小是用"width=#"和"height=#"属性说明，"width=#"表示宽，"height=#"表示高，，#是以象素或者百分比为单位的数字。表格边框的宽度是用"border=#"属性说明，，#为宽度值，单位是象素，表格边框的颜色是用"bordercolor="#"属性说明，#是16进制的6位数，格式为rrggbb，分别表示红、
绿、兰三色的分量。或者是16种已定义好的颜色名称，参见文本颜色，单元格边框的颜色属性与表格的相同，但只适用于IE。下面是一个宽为300,高为80,边框宽为4,边框颜色为"FF0000"的一行两列表格，其中第一个单元格的宽为200,高为80，第二个单元格的边框颜色为"0000FF"。&
代码如下：
＜table&border="4"
width="300" height="80" bordercolor="#FF0000"＞
＜td&width="200"
height="80"＞&＜/td＞
＜td&bordercolor="#0000FF"＞&＜/td＞
＜/table＞&
2、表格的水平摆放位置
表格的水平摆放位置是用align="#" 属性说明的，#为left(左对齐), right(右对齐),
center(居中)。分别见下例，注意这三个表格与边界的位置关系：
第三个表格的代码如下：&
＜table width="80" border="1"&align="right"&height="30"＞
＜td＞右对齐＜/td＞
＜/table＞
　　3、单元格里内容的位置属性
　　水平对齐方式，用align="#"属性说明，#为left(左对齐), right(右对齐),
center(居中)；垂直对齐方式，用valign="#"属性说明，#为top(上对齐), bottom(下对齐),
middle(居中)。分别见下例，注意单元格里的内容与边框的的位置关系：
水平对齐方式：
内容左对齐
内容右对齐
代码如下：
＜table width="450" border="1"＞
＜td width="150"＞
＜div&align="left"＞内容左对齐＜/div＞
＜td width="150"＞
＜div&align="center"＞内容居中＜/div＞
＜div&align="right"＞内容右对齐＜/div＞
＜/table＞
垂直对齐方式
内容上对齐
内容下对齐
代码如下：
＜table width="150" border="1"＞
＜td height="40" width="146"&valign="top"＞内容上对齐＜/td＞
＜td height="40" width="146"&valign="middle"＞内容居中＜/td＞
＜td height="40" width="146"&valign="bottom"＞内容下对齐＜/td＞
＜/table＞
　　4、表格的背景色、背景图片，单元格的背景色、背景图片
　　背景色属性：bgcolor="#" ，背景图片属性：background="#"。
代码如下：&
＜table width="450" border="1"&bgcolor="#539996"&bordercolor="#FFFFFF"
height="90"＞
＜td＞&＜/td＞
＜td&background="Back01.gif"＞&＜/td＞
＜td＞&＜/td＞
＜td＞&＜/td＞
＜td&bgcolor="#FF0000"＞&＜/td＞
＜td＞&＜/td＞
＜/table＞
　　说明：在上例中，整个表格的背景色是&bgcolor="#539996"&，第一行第二列的单元格背景图片是&background="Back01.gif"&，第三行第二列的单元格背景色是bgcolor="#FF0000"&,根据显示结果可以看出：设置表格的背景色后再设置单元格的背景色或背景图片，将优先显示单元格的属性。
　　5、表格属性cellspacing、cellpadding
cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。&
我们来看下面的两个表格：
　　上面第一个表格的单元格之间没有空白距离，而第二个的单元格之间有很大的空白距离，我们来比较一下他们的源代码：
第一个表格的代码：
＜table width="200"&cellspacing="0"&border="1"
bordercolor="#000000"＞
＜td＞&＜/td＞
＜td＞&＜/td＞
＜td＞&＜/td＞
＜/table＞
第二个表格的代码：
＜table width="200"&cellspacing="8"&border="1"
bordercolor="#000000"＞
＜td＞&＜/td＞
＜td＞&＜/td＞
＜td＞&＜/td＞
＜/table＞
　　比较代码，上边两个表格中只有&cellspacing&的设置不同，一个为"0"，一个为"8"，显示的结果就是第一个表格的每个单元格之间的距离为0(在本例中由于我们为了显示的方便，将表格边框设为"1"，所以单元格的真实距离是"2"，若将表格边框设为"0"，则单元格　的距离就是0了，第二个单元格同理)，第二个表格的每个单元格之间的距离为8。
　　cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。我们先来看看这个例子:
我们来看下面两个表格：
　　第一个表格单元格的内容与单元格边界之间没有空白距离，而第二个表格单元格的内容与单元格边界之间有空白距离，我们来比较一下他们的源代码：
第一个表格的代码：
＜table width="240" cellspacing="0" border="1"
bordercolor="#000000"&cellpadding="０"＞
＜td width="120"＞网页陶吧＜/td＞
＜td＞&＜/td＞
＜/table＞
第二个表格的代码：
＜table width="240" cellspacing="0" border="1"
bordercolor="#000000"&cellpadding="15"＞
＜td width="120"＞网页陶吧＜/td＞
＜td＞&＜/td＞
＜/table＞
　　两个表格只有红色部分代码不同。第一个表格中"网页陶吧"这几个字离它所在的单元格为0,那是因为设置了cellpadding="0"的原因.第一个表格中的"网页陶吧"这几个字离它所在的单元格比较远，那是因为cellpadding="15",也就是说"网页陶吧"离它所在的单元格的边界的距离为20像素。简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。
　　我们在以后的篇幅中会大量用到这两个属性，所以请大家不要弄混乱了, 为了形象的理解，请参考下图：
　　<img src="/blog7style/images/common/sg_trans.gif" real_src ="/bmiddle/8bd0dedagad04e" TITLE=""
ALT="table&表格的一些属性" />
6、表格属性colspan、rowspan
横跨两列的单元格 colspan = 2
Bill Gates
555 77 854
555 77 855
横跨两行的单元格 rowspan = 2
Bill Gates
555 77 854
555 77 855
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。html表格中的tr,td,th用法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
html表格中的tr,td,th用法
上传于||文档简介
&&h&#8203;t&#8203;m&#8203;l&#8203;表&#8203;格&#8203;中&#8203;的&#8203;t&#8203;r&#8203;,&#8203;t&#8203;d&#8203;,&#8203;t&#8203;h&#8203;用&#8203;法
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢首先，我们需要知道的是：我们可以对表格table设置margin，而不能设置对单元格td设置padding，而不能设置margin。所以说，我们不能对单元格td设置margin属性来调整单元格与单元格之间的距离，但是我们可以使用一下方法来达到同样的效果。1)&设置padding就像刚才所说的那样，我们可以对单元格td设置padding属性来调整单元格之间的间隔td{padding:5px&10}2)&使用标签我们可以在单元格td内添加标签，然后对标签设置margin属性p{margin:5px&10}&&3)&对表格table设置border-spacing(IE不支持)　　先让我们简单了解一下border-spacing属性。border-spacing:设置单元格td的边在横向和纵向上的间距。当您指定一个length值时，这个值将作用于横向和纵向上的间距;当您指定两个length值时，第一个将作用于横向间距，第二个值将作用于纵向间距。table{border-spacing:5px&10}
阅读(...) 评论()欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> HTML Table tr td th表格标签元素知识篇
&table&表格布局篇，认识表格基础语法，认识table表格结构语法，通过html table tr td、html table tr th表格实例掌握表格认识html表格table样式布局。同时table的样式可以通过样式控制其各式各样的样式。
html table表格目录
一、table表格语法与结构
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
以上2个表格结构中td和th使用，没有区别均可使用。
二、table标签使用说明
我们学习了，不是就完全放弃丢弃table表格布局。想想我们为什么学习其中一个因素，让布局更简单、代码更简单，所以有时候我们也需要table表格来布局。
比如，电子表格型的数据表格。
三、Table表格标签使用场景
这个是淘宝支付宝页面里任意截的一张表格运用图片：
html table表格实际应用截图
四、Table tr td th表格使用案例
&width=&300&&border=&1&&cellspacing=&0&&&&&&&&&&&&&&&班级&&&&&&&&&日期&&&&&&&&&标题&&&&&&&&&&&&&&&&&&&一班&&&&&&&&&&&&&&&&&&标题1&&&&&&&&&&&&&&&&&&&二班&&&&&&&&&&&&&&&&&&标题2&&&&&&&
DW软件里截图：
table案例教程布局截图
谷歌浏览器效果截图：
table表格布局案例在浏览器中截图
五、DW软件输入表格标签
可以在DW软件中直接输入你要的表格：
第一步：单击DW软件&插入&，然后选择点击&表格（T）&
DW布局表格
第二步：在弹出&表格&设置选项卡，设置需要表格，行、列、宽度等属性
输入table布局
第三步：设置完后，点击&确定&，即可在DW输入标准的table表格标签。
六、DIVCSS5对于table表格总结
1、表格可以在DW输入，拖拽调整
2、table表格实用于多列数据列表
3、学习了DIV CSS还得学习TABLE
4、table会使用灵活运用即可
5、多列数据列表table标签要比使用div css节约代码，任意控制内容排版如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; ()&#8226; &#8226; ()&#8226; ()&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226;
必备HTML基础教程 Essential HTML Tutorials
&最新文章NEWS&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; 相关文章RELATED&#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; &#8226; CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 21:13
原创：本文 DIVCSS5版权所有。
学习与资源分享平台HTML的table中如何合并多行？_百度知道