HTML中的如何调TD的样式_随笔

一、字体的调整，可以才CSS文档里写入：比如：TD { font-family: "宋体", "楷体_GB2312", "仿宋_GB2312" 9pt}font-family:是字体font-size:是字体大小二、TD之后的字体调用：<td><font color="#FF0000">文字内容 </font></td><td><font size=7>文字内容 </font></td>三：<td>的参数设定（常用）：例如：<td width="48%" height="400" colspan="5" rowspan="4" align="right" valign="bottom"bgcolor="#ff00ff" bordercolor="#808080" bordercolorlight="#ff0000"bordercolordark="#00ff00" background="myweb.gif">width="48%" 该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。 height="400" 该一储存格高度。 colspan="5" 该一储存格向右打通的栏数。 rowspan="4" 该一储存格向下打通的列数。 align="right" 该一储存格内字画等的摆放贴齐位置（水平），可选值为： left, center, right。 valign="bottom" 该一储存格内字画等的摆放贴齐位置（垂直），可选值为： top, middle, bottom。bgcolor="#ff00ff" 该一储存格底色。bordercolor="#808080" 该一储存格边框颜色。『只适用於 ie』 bordercolorlight="#ff0000" 该一储存格边框向光部分的颜色。『只适用於 ie』bordercolordark="#00ff00" 该一储存格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用於 ie』background="myweb.gif" 该一储存格的背景图片

我是建一个三行一例的表格，用如下代码替换<TD></td><td style="BORDER-RIGHT: #fffffff 0px solidBORDER-TOP: #000000 0px solidFILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#ffffff', gradientType='0')"></td>-------------------------------------------------------------------------------------------------------startColorStr='#000000' 渐变色起始色endColorStr='#ffffff' 渐变色终止色。gradientType='0' 参数为0，1，2三种效果，也可以是左右渐变色。至于要达到你的效果，把上下两行的行高定小一点。删了就行。调整一下表格即可，没什么难度。如整站多处用渐变色表格的话建议用外链CSS文件，不用重复多次代码，只用引用CSS就行。' -----------------------------------------------------------------------------------------------------------------调试页面DW8做的，全部代码如下，请验证。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</style>

</head><body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

一、只对表格table标签设置边框 - TOP

只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。

案例详细如下：

1、对应css代码

2、对应html代码片段

<divclass="table-a"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>div>

二、对td设置边框 - TOP

对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。

详细案例教程如下：

1、对应css代码

2、对应html源代码片段

<divclass="table-b"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>

三、对table和td技巧性设置表格边框 - TOP

如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。

解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。

解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下边框解决显示右侧和下侧td剩下未显示边框。

1、对应css代码：

2、对应html源代码片段：

<divclass="table-c"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>

四、对table和td设置背景，实现完美表格边框 - TOP

1、基础设置

1）、先设置table css背景为红色

2）、设置table单元之间间距为1

使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化 *** 作步骤简要说明，首先（视图模式）选中表格后，对应DW软件编辑窗口底部会“属性”面板会出现对应table表格属性设置地方，我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”（cellspacing="1"）。

借助DW软件设置表格单元之间间距

或

直接对

标签内cellspacing="1"即可，得到：

<tablewidth="400"border="0"cellspacing="1"cellpadding="0">

3）、设置table td背景为白色

2、css代码：

3、对应html源代码：

<divclass="table-d"><tablewidth="400"border="0"cellspacing="1"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">网址td><tdwidth="112">说明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS学习td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切图td>tr>table>div>

五、css table表格边框实现总结 - TOP

以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。希望DIVCSS5整理总结html table边框布局方法对大家有帮助并能掌握，平时需要时灵活运用。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6123655.html

HTML中的如何调TD的样式

发表评论

评论列表（0条）