css设置表格样式(css样式表可以实现什么功能)
如何在CSS表格样式
以下是定义行高代码,数字越大,行与行之间距离越大
.td{
line-height: 12px;
}
或者用百分比也行
.td{
line-height: 150%;
}
调用时先在head/head之间放入
link href="css.css" rel="stylesheet" type="text/css" /
注意href="css.css"是路径自己定义
调用时用class="td"就行了
例:
table width="50"
tr
td class="td"121312313131/td
/tr
/table
纯CSS设置表格样式
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title千声盒子/title
style type="text/css"
/*不要使用标签名作为类名*/
/*.table{text-align:center;width:100%;height:100%;border-width:thin;border-style:solid;border-color:#AA9FFF;border-collapse:separate;}*/
.tbClass {
text-align:center;
width:100%;height:100%;
/*首先对大表格加上左边 和 底边*/
/*我自作主张加上了底边框,可以删掉去*/
/*听说FF下不支持缩写,请你自己把下面的写法拆分出来*/
border-left:2px #AA9FFF solid; /* 左边框 */
border-bottom:2px #AA9FFF solid; /*底边框*/
}
.tbClass td {/*单元格的上边和右边*/
border-top:2px #AA9FFF solid;
border-right:2px #AA9FFF solid;
}
.tbClass td {/*测试用,为了看到效果,你可以把这个删掉去*/
/*width:100px; height:80px;*/
}
/*专门为“盒子那行写的类”*/
.boxCell td { height:101px; padding:0; margin:0}
/style
/head
body
table id="Box" name="Box" class="tbClass" cellspacing=0!--注意! 1:我把类名由table改成tbClass了, 2: cellspacing=0--
?php
for($i=1;$i=1000;$i++){
if($i%5==0){
echo "td$i/td";
echo "/tr
tr class=\"boxCell\"
td盒子/td
td盒子/td
td盒子/td
td盒子/td
td盒子/td
/tr
";/////注意! 这里使用了一个boxCell的CSS类,不会那么多冗余代码
echo "tr";
}else{
echo "td$i/td";
}
}
?
/table
/body
/html
//////最后说明;
1。如果乱码,或无显示,请注意你php文件的编码格式,或在浏览器下选择GBK32编码
2。这种专业问题,如果到Csdn 里发帖,十分钟之内就有人回答了
3。百度的BUG:回复后再修改,就不能保持代码的缩进了 -_-!即不能tab缩进,要换成4个空格
怎样用CSS样式控制表格大小。谢谢
1、首先打开vscode编辑器,新建一个html文件,定义一个两行两列的表格,在浏览器打开的效果。
2、然后给表格添加边框,这里给table标签和td标签都设置边框,不过两个标签的边框颜色值不一样。
3、最后可以用width属性给表格设置宽度,用height属性设置单元格的高度,设置好后可以在浏览器看到效果。
怎么用CSS设置html中的表格边框样式
用CSS设置html中的表格边框样式用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?{
??????????????????'设置边框1像素?实线?红色
????????????????border:1px?solid?red;
????????????????}
????????????????td{
????????????????????'设置边框1像素?实线?黄色
????????????????????border:?1px?solid?yellow;
????????????????}
??????????????
????????/style
????/body
css表格的边框线怎么设置
border-collapse 属性:设置表格的边框是否被合并为一个单一的边框,即:用于设置表格边框是合并显示还是分开显示。
border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值:
-- separate 默认值:边框会被分开,不会忽略 border-spacing 和 empty-cells 属性;
-- collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性;
-- inherit:规定应该从父元素继承 border-collapse 属性的值。
双线表格边框的实现
html代码:
table
tr
td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td
/tr
tr
td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td
/tr
tr
td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td
/tr
tr
td内容/tdtd内容/tdtd内容/tdtd内容/tdtd内容/td
/tr
/table
css代码:
table,table td{
text-align: center;
border: 1px solid #000;
border-collapse:separate;
}
table td{
padding: 10px 30px;
}
表格边框的双线样式其实很简单,只要同时设置表格外边框和table里的每个单元格的边框,就可以实现了。
因为separate是默认值,就算是不设置border-collapse:separate;表格也会呈现双线效果。
我们主要是来看看border-collapse属性合并边框,实现单线边框的方法,html代码一样,只需设置css样式:
css代码:
table,table tr td {
border: 1px solid #000;
text-align: center;
border-collapse: collapse;
}table tr td {
padding: 10px 30px;
}
单线边框的实现也很简单,它是在双线样式的基础上,设置border-collapse: collapse;
把相邻的两个table边框合并成一个,使得相邻的两条线并在一起,边框就以单线的形式显示了。
总结:表格边框的无论是单线边框样式,还是双线边框样式都在前端页面中应用广泛,大家可以根据自己
怎样用css设定下表框的宽度、样式、颜色
请把问题讲得清楚一些,你说的表框是模块的边框还是表格的边框
如果是模块边框的话,就先弄懂这些参数和属性:
none (没有边框,无论边框宽度设为多大)
dotted (点线式边框)
dashed (破折线式边框)
solid (直线式边框)
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度,它的值如下:
medium (是缺省值)
thin (比medium细)
thick (比medium粗)
用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。例句如下:
.d5 {border-color:gray;border-style:solid;}
边框属性(border)
这个属性是边框属性的一个快捷的综合写法,它包含border-width, border-style和border-color。例句如下:
.d1 {border:5px solid gray;}
单边边框属性
上下左右四个边框不但可以统一设定,也可以分开设定。
设定上边框属性,你可以使用border-top, border-top-width, border-top-style, border-top-color。
设定下边框属性,你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
设定左边框属性,你可以使用border-left, border-left-width, border-left-style, border-left-color。
设定上边框属性,你可以使用border-right, border-right-width, border-right-style, border-right-color。
边框属性
前面例子里提到的,例如用来定义字体颜色的color,字体大小的font-size,都是CSS的属性。从这一课起,就开始详细介绍CSS的各类属性。
每一个网页都可以理解成是被一个方框框起来的,而页面中不同的部分又可以分为一个个小的方框。因此定义方框的边距、边界、颜色等的边框属性应用而生。
1、边距属性:
·左边距(margin-left)
·右边距(margin-right)
·上边距(margin-top)
·下边距(margin-bottom)
·边距(margin)
边距属性定义HTML页面中方框四边和其他元素之间的空白距离,每一个margin-side属性只影响到一条边,而margin则提供了一个同时设置四个边距的机会。
2、填充属性:
·左填充(padding-left)
·右填充(padding-right)
·上填充(padding-top)
·下填充(padding-bottom)
·填充(padding)
填充属性设置边框和内部元素的距离。它和边距属性十分相似,每个padding-side定义一个边框距离,padding则同时定义四个距离。
3、边界属性
·上边界宽(border-top-width)
·右边界宽(border-right-width)
·下边界宽(border-bottom-width)
·左边界宽(border-left-width)
·边界宽(border-width
这几个属性定义边界宽度,用thin、medium和thick分别表示细、中等和粗,或者指定具体的数值来定义边界的宽度。
·边界颜色(border-color)
这个属性定义边界的颜色,可以用16种颜色名或RGB值来设置。如果指定一种颜色,则表示四个边框是一种颜色,指定两种颜色,则定义顺序为上下、左右;指定三种颜色,顺序为上、左右、下;指定四种颜色,顺序则为上、右、下、左。16种颜色名分别为:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。RGB值则应表示为#RRGGBB或r%,g%,b%。
·边界样式(border-style)
该属性用以定义边框的风格呈现式样。共有九种。
none - 不显示边框,为缺省值
dotted - 点线
dashed —虚线
solid - 实线
double - 双线
groove -凹线
ridge - 凸线
inset - 使整个方框凸起
outset - 使整个方框凹陷
·上边界(border-top)
·右边界(border-right)
·下边界(border-bottom)
·左边界(border-left)
·边界(border)
这几个是简写属性,它集合了上面几种属性的特点,可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。
4、尺寸属性
定义方框的宽度width和高度height。
例:DIV.sample {width: 300px;
height: 200px }