网页表格边框颜色效果

最新推荐文章于 2022-05-03 12:08:08 发布

zyw745293

最新推荐文章于 2022-05-03 12:08:08 发布

阅读量4.3k

点赞数

文章标签： border table firefox 浏览器 stylesheet css

今天在写网页时用了一个表格，设定了边框的颜色后在Firefox里却没效果，于是就用CSS来试了一下，成功了。

以下是我原先写的代码Code-01：

<body>
<p align="center">
<table border="2" bordercolor="blue" align="center">
  <tr>
  <th>One</th> <th>Two</th> <th>Three</th> <th>Four</th>
  </tr>
  <tr>
   <td bordercolor="red">11</td> <td>12</td> <td>13</td> <td>14</td>
  </tr>
  <tr bordercolor="yellow">
   <td>21</td> <td>22</td> <td>23</td> <td>24</td>
  </tr>
</table>
</p>
</body>
</html>

下面是浏览结果：

IE浏览器浏览结果图1

Firefox浏览器浏览结果图2

后来找到了解决方案，看下面的代码段Code-02：

Test.css代码--

#table1
{
border:2px solid;
border-color:red;
}

#table2
{
  border:4px solid;
  border-color:blue;
}

#table1 td
{
  border:1px solid;
  border-color:blue;
}

#table1 th
{
  border:1px solid;
  border-color:yellow;
}

a.html代码--

<body>
<p align="center">
<table id="table1">
  <tr>
   <th>One</th> <th>Two</th> <th>Three</th> <th>Four</th>
  </tr>
  <tr>
   <td>11</td> <td>12</td> <td>13</td> <td>14</td>
  </tr>
  <tr>
   <td>21</td> <td>22</td> <td>23</td> <td>24</td>
  </tr>
</table>

<br>

<table id="table2">
  <tr>
   <th>One</th> <th>Two</th> <th>Three</th> <th>Four</th>
  </tr>
  <tr>
   <td>11</td> <td>12</td> <td>13</td> <td>14</td>
  </tr>
  <tr>
   <td>21</td> <td>22</td> <td>23</td> <td>24</td>
  </tr>
</table>
</p>
</body>
</html>

下面是浏览器中浏览的结果图：