[IE兼容性] Table 之边框

最新推荐文章于 2024-08-07 02:17:51 发布

hao_ds

最新推荐文章于 2024-08-07 02:17:51 发布

阅读量4.7k

点赞数

分类专栏： HTML CSS

HTML 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

前言

table 是HTML 中常用的标签。

定义一个简单的表格

<!--Add by oscar999-->  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<HEAD>  
<TITLE> New Document </TITLE>  
<META NAME="Author" CONTENT="oscar999">  
<script>  
</script>  
<style>  
  
</style>  
</HEAD>  
  
<BODY>  
<table>  
  <tr>  
    <td>1</td>  
    <td>2</td>  
    <td>3</td>  
  </tr>  
  <tr>  
    <td>4</td>  
    <td>5</td>  
    <td>6</td>  
  </tr>  
  <tr>  
    <td>7</td>  
    <td>8</td>  
    <td>9</td>  
  </tr>  
</table>  
  
</BODY>  
</HTML>

以上的效果是不会出现边框的。

给表格添加边框

1. 方式一：定义table 的border 属性

<table border=1>

效果是会出现双边框的效果。

2. 方式二：使用CSS 定义

边框的定义样式可以定义的值有：

border-width	规定边框的宽度。参阅：border-width 中可能的值。
border-style	规定边框的样式。参阅：border-style 中可能的值。
border-color	规定边框的颜色。参阅：border-color 中可能的值。

<!--Add by oscar999-->  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<HEAD>  
<TITLE> New Document </TITLE>  
<META NAME="Author" CONTENT="oscar999">  
<script>  
</script>  
<style>  
table{  
    border: 1px solid blue;  
}  
</style>  
</HEAD>  
  
<BODY>  
<table>  
  <tr>  
    <td>1</td>  
    <td>2</td>  
    <td>3</td>  
  </tr>  
  <tr>  
    <td>4</td>  
    <td>5</td>  
    <td>6</td>  
  </tr>  
  <tr>  
    <td>7</td>  
    <td>8</td>  
    <td>9</td>  
  </tr>  
</table>  
  
</BODY>  
</HTML>

效果如下：

仅仅是最外层有边框，内边框没有。

如果要加上内边框的话，样式的定义：

<style>  
table,td{  
    border: 1px solid blue;  
}  
</style>

合并边框

上面表格具有双线条边框。这是由于 table、 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，使用 border-collapse 属性，定义如下

<style>  
table{  
     border-collapse:collapse;  
}  
table,td{    
    border: 1px solid blue;  
}  
</style>

IE8 以下出现td无内容就无边框的问题

看上去很简单，也很圆满。

但是在IE 8 以下的浏览器中会出现边框丢失的状况。

发生的状况是td 的值为空

以上的CSS 如下方式定义：

table{  
    border:green dotted;  
    border-width: 2 0  0 2;   
}  
td{  
    border:green dotted;  
    border-width: 0 2 2 0;  
}

Chrome 的效果

但是在IE的效果

解决方法有两种：

1. 空的td 加上  

2. 使用上面介绍的 border-collapse:collapse; 就可以了。

HTML_TABLE内外边框颜色设置及页面居中

<table width="100%"  cellpadding="0" cellspacing="0" bgcolor="#a1a1a1" id="table2">---此处设置外边框颜色
<tr >
<td bgcolor="#ffffff" colspan="6" height="25" align=center><font color=#ea5e01 size=3><strong>房屋基本信息</strong></font></td>
</tr>          
<tr>
<td bgcolor="#E6E6FA" height="25" width="13%" align=center>房屋狀態</td>
<td bgcolor="#ffffff" width="20%" valign=center  >---此处设置单元格边框颜色
$TYPE$</td>
<td bgcolor="#E6E6FA" width="13%" align=center >房屋類別</td>此处设置单元下边框颜色
<td bgcolor="#ffffff" width="20%" valign=center >$FWLB$</td>
<td bgcolor="#E6E6FA" width="13%" align=center>所在地區</td>
<td bgcolor="#ffffff" width="20%" valign=center >$XS$</td>
</tr></table>

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#a1a1a1" id="table2">---此处设置外边框颜色

<tr >
<td bgcolor="#ffffff" colspan="6" height="25" align=center><font color=#ea5e01 size=3><strong>房屋基本信息</strong></font></td>
</tr>
<tr>
<td bgcolor="#E6E6FA" height="25" width="13%" align=center>房屋狀態</td>
<td bgcolor="#ffffff" width="20%" valign=center >---此处设置单元格边框颜色
$TYPE$</td>
<td bgcolor="#E6E6FA" width="13%" align=center >房屋類別</td>此处设置单元下边框颜色
<td bgcolor="#ffffff" width="20%" valign=center >$FWLB$</td>
<td bgcolor="#E6E6FA" width="13%" align=center>所在地區</td>
<td bgcolor="#ffffff" width="20%" valign=center >$XS$</td>
</tr></table>

bordercolor="#254389"----设置所有边框颜色

style= "border:1px solid #000000;border-right- color :#FF0000;"
整体加边框: border:1px solid #000000; 1PX为边框大小,#000000为颜色!
只给某一边加边框: 右边框 border-right- color :#FF0000;
左边框 border-left- color :#FF0000;
上边框 border-top- color :#FF0000;

下边框 border-bottom-color:#FF0000;

HTML：table表格画线控制

一、表格中单元格之间分隔线的隐藏方法

第	一	行
第	二	行
第	三	行

这个表格去掉了单元格之间的纵向分隔线

第	第	第
一	二	三
列	列	列

这个表格去掉了单元格之间的横向分隔线

横		线
竖		线
都	没	了

这个表格去掉了单元格之间的纵向分隔线和横向分隔线

其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有 rules。它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules= rows时，则隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。

二、表格边框的隐藏

普	表
通	格

这是一普通的表格

不怕	下雨

只显示上边框


下起雨来	该怎么办

只显示下边框

上不着天
	下不着地

只显示左、右边框

	两边走开
老子姓王

只显示上、下边框

左右
为难

只显示左边框

	左右
	为难

只显示右边框

光秃秃
	全脱了

不显示任何边框

表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>

三、表格边框

普	表
通	格

这是一普通的表格

细	表
线	格

表格加上了漂亮的细线
(利用cellspacing1像素间隙和表格与单元格背景的不同)

细	表
线	格

这和上面那个可不一样，它用的是CSS，效果却一样。
(对单元格border的定义)

细	表
线	格

再进一步，把边框变成虚线，同样是CSS的神奇作用。

细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。

立	表
体	格

立体感的表格
(简单的亮暗边框设置，注意只有IE支持这种效果)

无名表格

给表格加上一个表头
(应用<fieldset>和</legend>标签)

表中表效果Ⅰ

给表头再加个框
(用CSS为<legnd>定义一个边框)

<table width="200"" cellspacing="0" cellpadding="0"> <tr> <td> <fieldset align="center"> <legend > 表中表效果Ⅰ</legend> <br> </fieldset> </td> </tr> </table>

表中表效果Ⅱ

看起来和上面的一样，可是这个才是真正的表中表哦。
(在<legnd>中插入一个表格)

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >

来自: http://hi.baidu.com/%C4%FE%BE%B2%B5%C4%B7%B1%BB%AA/blog/item/56d3997547208c15b051b9c5.html