⑴ 用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>