HTML5表格行边框颜色设置怎么没用?

html-css016

HTML5表格行边框颜色设置怎么没用?,第1张

你好,关于html中标签的一些样式属性,其实在设置后会自动的生成css样式,所以我们打开控制台可以看见,虽然tr中你设置了borddercolor,但是在控制台中查看tr的样式可以看见如下图所示:

tr在控制台中的查看样式

也就是说,tr的样式是继承(inherit)其父标签的,也就是table的,table是什么颜色,那它就是什么颜色,解决的方法就是使用css样式,可以外部,也可以内联,这里使用内联样式演示一下:

采用内联样式解决

代码如下(就是使用了内联样式而已):

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>设置行的边框颜色</title>

</head>

<body>

  <table width="500" border="1" bordercolor="blue">

    <caption>某公司员工工资</caption>

    <tr>

      <th>姓名</th>

      <th>基本工资</th>

      <th>岗位工资</th>

      <th>绩效工资</th>

      <th>工龄工资</th>

    </tr>

    <tr style="border-color: red">

      <td>李1</td>

      <td>1000</td>

      <td>600</td>

      <td>800</td>

      <td>400</td>

    </tr>

    <tr>

      <td>王2</td>

      <td>800</td>

      <td>600</td>

      <td>800</td>

      <td>200</td>

    </tr>

  </table>

</body>

</html>

html5让边框发光,就是给那个边框加上一层外阴影,然后使用一个不同于边框的颜色就行了,通过box-shadow来设置,它的一些属性有:X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色;这里我写一些代码更容易理解:<html> <head><style>#but{width:200px height:200px box-shadow:-10px 0 10px red, /*左边阴影*/ }</style> </head><body> <div id='but'> <p>我是测试文字</p> </div> </body></html>

html设置table的边框的方法是使用border 属性实现。

说明:

border 属性规定表格单元周围是否显示边框。

值 "1" 指示应该显示边框,且表格不用于布局目的。

在 HTML5 中,border 属性仅用于指示表格是否用于布局目的,且只允许属性值 "" 或 "1"。

完整用法举例:

1、html中的table代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>table的边框</title>

</head>

<body>

<table border="1">

<tr>

  <th>Month</th>

  <th>Savings</th>

</tr>

<tr>

  <td>January</td>

  <td>$100</td>

</tr>

<tr>

  <td>February</td>

  <td>$80</td>

</tr>

</table>

</body>

</html>

2、运行后的效果: