怎么用CSS设置html中的表格边框样式

如题所述

设置表格的样式可以直接使用css的border样式来设置的。

工具原料:编辑器、浏览器

1、设置一个表格的外边框为红色,内边框的为黄色,代码如下:

<body >
<table>
<tr>
<td>知道</td>
<td>知道</td>
<td>知道</td>
</tr>
<tr>
<td>知道</td>
<td>知道</td>
<td>知道</td>
</tr>
<tr>
<td>知道</td>
<td>知道</td>
<td>知道</td>
</tr>
</table>
<style>
table {

border:1px solid red;
}
td{
border: 1px solid yellow;
}

</style>
</body>

2、运行的效果如下:

温馨提示:内容为网友见解,仅供参考
第1个回答  2016-10-25

在td中添加边框样式,border

简单写了个示例,如下,希望对你有帮助,望采纳!


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

table td{ border: 1px solid #dedede; }

table{border-collapse: collapse;}

</style>

</head>

<body>

<table cellpadding="0" cellspacing="0">

<tr height="30px">

<td width="100px"></td>

<td width="100px"></td>

<td width="100px"></td>

</tr>

<tr height="30px">

<td></td>

<td></td>

<td></td>

</tr>

<tr height="30px">

<td></td>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

本回答被提问者采纳
第2个回答  2016-10-25
几种方式都可以实现:内联样式直接在标签里面写,例如给表格添加1px的实线红框
<table style="border:1px solid #f00"></table>
或者在外部样式表写样式
先给自己的表格取个class名或者id名,例如
<table class="myTable"></table>
引用的样式表里面写
.myTable{border:1px solid #f00}

补充一句:我是专业的前端,有不懂的都可以问我,学习资料什么的都有,满意请采纳哟

怎么用CSS设置html中的表格边框样式
首先(视图模式)选中表格后,对应DW软件编辑窗口底部会“属性”面板会出现对应table表格属性设置地方,我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”(cellspacing="1")。

怎么用CSS设置html中的表格边框样式
简写属性,用于把针对四个边的属性设置在一个声明。border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

怎么用CSS设置html中的表格边框样式
CSS代码:table-a table{border:2px solid red}<!--关键代码:border设置属性值-->这里是可以根据需要进行修改的HTML代码:效果图如下:

css设置表格某一行的样式(css怎么设置表格的行高和列宽)
1、首先新建一个html文件,命名为test.html,在test.html文件内,使用p标签创建一行字符,用于测试。2、在test.html文件内,给p标签添加一个class属性,用于样式的设置。3、在test.html文件内,编写styletype="text\/css"\/style标签,页面的css样式将写在该标签内。4、在css标签内,通过class属性和“:...

怎么用CSS设置html中的表格边框样式
利用border属性来设置,如border:1px solid #ff0;.table-b table td{border:1px solid #F00} 希望对你有帮助,望采纳!

怎么用CSS设置html中的表格边框样式
用CSS设置html中的表格边框样式,要设计的样式非常多,下面举例说明工具:记事本浏览器方法如下:CSS代码:table-a table{border:1px solid #F00}<!--关键代码:设置表格边框为1像素,实体,红色-->HTML代码:<div class="table-a"><table width="400" border="0" cellspacing="0" cellpadding="...

怎么设置HTML表格细边框
一般用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下:可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格border的宽,会看到的宽应该是<td>之间有间隙所致。因此只需 要修改表格的cellspacing属性即可,即:<table border="1px" cellspacing="0px">,效果如下:但...

html网页设计表格,如何通过css让表格只有外边框,而没有内边框?或者只有...
\\x0d\\x0a如果你要给特定的表格加入这个样式:\\x0d\\x0a1 给那个表格加上class='classname' (classname是你自己起的样式名)\\x0d\\x0a2 然后在CSS里加上\\x0d\\x0a.classname{\\x0d\\x0aborder:1px solid #000;\/*黑色1像素粗边框*\/\\x0d\\x0a}\\x0d\\x0a.classname td{\\x0d\\x0a...

HTML中正确设置表格table边框border的三种办法
html中如果设置table的border为1px,实际会产生双线,十分不美观,那么在HTML中如何正确设置表格table边框border呢?第一种方法:1、将table的属性设置为:BORDER=0 、cellspacing=1 ;2、设置table的背景色为即你要设置的table的边框颜色;3、设置所有td背景色为#ffffff白色;第二种方法:1、设置BORDER=...

css怎么控制表格的边框粗细,还要显示线条和颜色
可以通过设置单元格元素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><...

相似回答