⑴ 用css样式表如何制作一个3行2列的表格,边框为1px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.tab{ margin:0; padding:0; /*合并边线*/border-collapse:collapse;/*宽高自定*/ width:200px; height:200px}
.tab td{ border:solid 1px #000}
</style>
</head>
<body>
<table class="tab">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
属性都写在CSS里就可以了
⑵ 1、分别用table和div实现一个细线表格(3行3列,表格边框1px(红色),单元格200px*200px)
表格方式:
<tablewidth="598"cellspacing="0"cellpadding="0"style="border:1pxredsolid">
<tr>
<tdwidth="200"style="border-right:1pxredsolid;border-bottom:1pxredsolid">第一行1</td>
<tdwidth="200"style="border-right:1pxredsolid;border-bottom:1pxredsolid">第一行2</td>
<tdwidth="200"style="border-bottom:1pxredsolid">第一行3</td>
</tr>
<tr>
<tdwidth="200"style="border-right:1pxredsolid;border-bottom:1pxredsolid">第二行1</td>
<tdwidth="200"style="border-right:1pxredsolid;border-bottom:1pxredsolid">第二行2</td>
<tdwidth="200"style="border-bottom:1pxredsolid">第二行3</td>
</tr>
<tr>
<tdwidth="200"style="border-right:1pxredsolid;">第三行1</td>
<tdwidth="200"style="border-right:1pxredsolid;">第三行2</td>
<tdwidth="200">第三行3</td>
</tr>
</table>
div方式:
<style>
#tb{width:600px;height:auto;margin-top:10px;}
.td{float:left;width:198px;height:20px;border-left:1pxsolidred;border-top:1pxsolidred;}
.tr{clear:both;height:20px;}
.td1{border-right:1pxsolidred;}
.td2{border-bottom:1pxsolidred;}
</style>
<divid="tb">
<divclass="tr"><divclass="td">td1</div><divclass="td">td2</div><divclass="tdtd1">td3</div></div>
<divclass="tr"><divclass="td">td1</div><divclass="td">td2</div><divclass="tdtd1">td3</div></div>
<divclass="tr"><divclass="tdtd2">td1</div><divclass="tdtd2">td2</div><divclass="tdtd1td2">td3</div></div>
</div>
⑶ web前端开发,怎么处理css3中边框倒角属性,在ie8以下不兼容问题
据我所知,一旦用了border-radius就没法兼容IE8及以下版本,那个时代做个性边框是用一个3*3的table,周围的8个单元格组成边框,中央一个单元格写内容。
获取其他人有办法?
⑷ 4. 在网页中插入一个3行2列,表格边框为0,宽度为1024,高度为778,背景颜色为红色,在第一个单元格内插入
把光标放在第一个单元格内,然后右键“插入表格”你选择三行两列,然后选中插入的表格,右键,有“表格属性”可对表格进行设置为宽度为1024高度为778,然后点击“边框和底纹”就选择“无边框”。这样就OK了!
⑸ web前端开发,怎么处理css3中边框倒角属性
CSS3 使用border-radius属性设置圆角效果
该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属性的可能取值为:
none,默认值,表示元素没有圆角效果
length,由浮点数字和单位标识组成的长度值
%,由百分比设置的圆角值
该属性可以分别设置元素的四个圆角效果,采用下列格式来实现。
格式:border-radius: 左上角 右上角 右下角 左下角;
通常,四个方向的角半径均采用length取值来实现,该取值必须为浮点数字和单位标识共同组成。同时规定,该取值不得取负数。
例1:利用整数来实现圆角取值。
div{
width: 200px; height: 150px;
border: solid 1px #aaaaaa;
border-radius: 10px 5px 10px 5px;
background-color: #ff5857;
}
上述实例设置了一个div块级元素,其宽度为200px,高度为150px。为了能够看到其圆角效果,增加了颜色为#ff5857的背景颜色,并且添加了1px大小的边框,其边框为实线,边框颜色为#aaaaaa。最后设置其圆角效果,左上角和右下角均为10px,右上角和左下角均为5px。
例2:查看下列CSS代码。
(1)border-radius: 10px 5px 15px 20px;
(2)border-radius: 10px 5px 15px;
(3)border-radius: 10px 5px;
(4)border-radius: 10px;
上述四组代码中,只有组(1)提供了完全符合格式的四个数据,其他三组均只提供了小于四个的数据。这种情况下,数据依然按照“左上角 右上角 右下角 左下角”的顺序进行排列,没有涉及到的角方向按照其对角的圆角数据进行设置。
因此,组(2)的数据表示:左上角为10px,右上角为5px,右下角为15像素,左下角为右上角的像素设置,即5px。请同学们根据这样的方法,理解一下组(3)的圆角含义。
组(4)就设置了一个数据,这表示四个方向的角半径均为10px。
二、独立设置元素的四个圆角效果:
若只想设置一个块级元素右上角的圆角效果,该如何实现呢?这里W3C为border-radius属性派生出了表示四个方向的独立圆角效果的子属性。
border-top-left-radius, 定义左上角的圆角效果
border-top-right-radius, 定义右上角的圆角效果
border-bottom-right-radius, 定义右下角的圆角效果
border-bottom-left-radius, 定义左下角的圆角效果
上述四个子属性的取值规则和border-radius属性的取值规则是完全相同的。
例3:设置p标记的圆角效果,其中左下角没有圆角效果,其他三个方向角的圆角效果均为25px。
方法1:利用border-radius属性统一设置。
p{border-radius: 25px 25px 25px 0;}
方法2:利用border-radius属性的派生子属性设置。
p{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
方法3:利用border-radius属性设置所有角方向均为25px,再利用border-radius属性的派生子属性设置左下角没有圆角效果。
p{
border-radius: 25px;
border-bottom-left-radius: none;
}
⑹ 怎样在文后插入一个3行3列的表格,要求表格线为浅蓝色实线,其中内边框线宽为0.5磅,
今天正好有时间,就一步一步教你吧
1、将光标移动到要插入表格的位置。选择“表格”,“插入”,“表格”,将表格的行数和列数全部设置为3,“确定”;
2、将插入的表格全选,右击,“表格属性”,“表格”,“边框和底纹”,在“颜色”里选择你要的浅蓝色,在“线性”中设置线条样式。
3、在“设置”中选择第一个“无”,设置宽度(外边框),然后再预览中单击外边框对应的按钮,外边框就设置好了。
4、再次设置宽度(内边框),然后再预览中单击内边框对应的按钮,完了后,“确定”,“确定”,就OK了。
⑺ html语法,让table里的每一个行和列都有黑色的边框线怎么弄css代码。
两种方法可以使用,
1、使用style的td{border:1px solid black;}属性可以添加边线,但是容易线条重叠,显得不美观,单独使用td{border-top:1px solid black;}等属性操作繁琐,基本不建议使用
2、使用table自带属性<table border="1">,可以直接为table内的单元格加上线条,但是单元格之间默认有边距,如果不想要的话使用cellspacing="0"清空边距,而且使用border="1"线条会显得比较粗,所以可以使用style="border-collapse:collapse;"让其变细,以下为demo代码。
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<!-------使用table自带属性border,cellspacing属性0是取消单元格之间的距离,不写style部分线条默认会比较粗--------->
<tablecellspacing="0"border="1"style="border-collapse:collapse;">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
⑻ 如何在HTML的表格table中实现某一格显示框,其他框都是透明的。例如:4X4的表格只有第2行3列有列表框
设置边框来实现。
示例代码:
<table width="200" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td style="border-left:double; border-right:double; border-top:double; border-bottom:double;"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
⑼ 有没有前端的前辈,这样的边框怎么做
将这个图片设为背景,然后给相应的内边距就可以做到了
⑽ 急!用html语言写出一个三行三列,宽度为300像素,边框为1像素的表格
<html>
<head></head>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<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>
</body>
</html>