css怎么控制表格的边框粗细,还要显示线条和颜色

html-css019

css怎么控制表格的边框粗细,还要显示线条和颜色,第1张

可以通过设置单元格元素td的边框样式来实现:

border: width style color  /*分别设置边框的粗细、样式和颜色*/

示例如下:

在HTML代码中给出两个表格

<table class="tb1">

<tr><td>有</td><td>志</td><td>者</td></tr>

<tr><td>事</td><td>竟</td><td>成</td></tr>

</table>

<table class="tb2">

<tr><td>苦</td><td>心</td><td>人</td></tr>

<tr><td>天</td><td>不</td><td>负</td></tr>

</table>

分别设置不同的样式

table{ /* 表格整体样式 */

margin:50px  /* 外边距50px */

border-collapse:collapse /* 合并为单一的边框线 */

}

/* 设置tb1类的表格样式 */

table.tb1 td{padding:10pxborder:1px solid green}

/* 设置tb2类的表格样式 */

table.tb2 td{padding:20pxborder:5px dashed blue}

最终效果如下

CSS 加粗使用CSS属性单词font-weight:

例子:

.yangshi1{ font-weight:bold}

.yangshi2{ font-weight:600}

font-weight对象值:从100到900,最常用font-weight的值为bold

font-weight参数:

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置

bold : 粗体。相当于number为700。也相当于b对象的作用

bolder : IE5+ 特粗体

lighter : IE5+ 细体

number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900