細線表格的製作

阿新 • • 發佈：2019-01-13

在從事web網頁程式開發時,table是我們常用的html標籤,為了頁面美觀,細線表格是web開發中基礎的要求,也不知道當初制定html標準時是怎麼想的,明明設定了table的border="1",非要將表格邊框實際大小變成了2px,搞得每次用時還得重新寫css進行控制.下邊就總結兩種在網上搜集的方法,以備隨時查閱:

一、通過表格背景顏色和單元格背景顏色結合，將表格邊框設定為1px

<table width="95%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000">
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
</table>

二、完全通過css進行控制

css程式碼：

<style type="text/css"> 
<!-- 
.table01{ 
border-collapse:collapse; 
} 

.td01{ 
background:#FFF; 
border:solid 1px #f90; 
height:22px; 
} 
--> 
</style>

html程式碼：

<table width="95%" align="center" class="table01">
  <tr>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
  </tr>
  <tr>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
  </tr>
  <tr>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
  </tr>
</table>

這種方法我採用的是類選擇器，使用標籤選擇器也可實現同樣效果

兩種方法的優劣自己評估去吧，自由選用~~

細線表格製作技巧－表格邊框樣式設定集錦

關鍵字:細線表格表格技巧細線表格程式碼 CSS細線表格摘要:看到不少朋友在問細線表格如何設定,雖然簡單,偶還是總結一下拿出來,也方便新手學習。缺陷失誤之處請大家指點.看的朋友如果有其他的實現方法,也希望能釋出到這裡,謝謝!不知道怎麼釋出html執行後的樣子，全是程式碼，真不直觀，會的朋友指點下，

細線表格的製作

在從事web網頁程式開發時,table是我們常用的html標籤,為了頁面美觀,細線表格是web開發中基礎的要求,也不知道當初制定html標準時是怎麼想的,明明設定了table的border="1",非要將表格邊框實際大小變成了2px,搞得每次用時還得重新寫css進行控制.下邊

用HTML製作細線表格

最近寫了一兩個網頁，把一個簡單的問題寫在這裡，只是自娛。程式碼如下： <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><

HTML細線表格的實現

需要 CI 實現代碼單元格 cells 通過 bgcolor 方法在網頁制作中，我們常常會使用到表格，表格使得需要表達的信息更清楚，明了。 <table border="1" cellspacing="0" bordercolor="#000000" widt

由合並細線表格而產生的疑問與解答

代碼外邊框 col code 就是間距容易常見 lec 由合並細線表格而產生的疑問與解答一、背景學習CSS之前制作的表格邊框效果單一，且產生對於border屬性的疑問，私下查找資料、寫代碼舉例子，做總結。二、深度理解table 中border 的定義如下一個

html細線表格

在網頁製作中，我們常常會使用到表格，表格使得需要表達的資訊更清楚，明瞭。 <table border="1" cellspacing="0" bordercolor="#000000" width = "80%"> <tr> <

細線表格樣式

.td{border:solid #add9c0; border-width:0px 1px 1px 0px;} .table{border:solid #add9c0; border-w

html中的細線表格

html在網頁製作中，我們常常會使用到表格，表格使得需要表達的資訊更清楚，明瞭。 <table border="1" cellspacing="0" bordercolor="#000000" width = "80%"> <tr> <td>1.1&

table細線表格

<html> <img id="tx_img" name="tx_img" width="100" height="130" border="1" /> <table width="800" style="border:1px solid #

用cellspacing實現細線表格

今天在做細線表格的時候，用cellspacing=1實現效果，挺好看的，而平時用的是border cellpadding 屬性規定單元邊沿與其內容之間的空白。 <table border="0" cellpadding="0" cellspacing="1" cl

CSS細線表格

Web分頁列印：細線表格+分頁列印之終極攻略

最近給客戶做列印的時候，客戶提出列印時不要列印該頁面的頭，只是打印表格里面的內容，因為頭部有背景和列印按鈕，而且要細線表格的那種，我想細線表格不是很簡單嗎如果你還不知道細線表格怎麼做，請看下面的程式碼實現效果：） <table cellSpacing=0 cellP

細線表格的幾種做法（css）【經典推薦】

(一)效果一般<style type="text/css"><!--table {border-collapse:collapse;}td{border-left:0;border-top:0;border-right:1px solid #00cd11;b

css設定細線樣式的表格

HTML表格細線程式碼

實現方式一 <table width="500" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000"> <t

利用CSS生成精美細線Table表格

精美的表格是前端開發用到的一個元件，很多時候我們利用複雜的頁面style程式碼，來生成這樣的表格，造成了頁面的修改性和可讀性都非常差。這裡推薦直接使用css來產生一個細線表格，如下圖：[img]http://www.kutoku.info/images/java/100810

不用css，實現帶細線灰色邊框的表格

<table width="800px" border="0px" cellpadding="10px" cellspacing="1" align="center" bgcolor="#d8d8d8"> <caption

手機上實現細線的效果

手機 scale cnblogs orm png ati pan com pos 使用縮放， html 1 <div class="slim"></div> css 1 .slim{ 2 position: relative;

html-css___table屬性（設置細線邊框）

pan css_ tab 設置屬性設置 borde pad solid nbsp 1 border-collapse 屬性設置表格的邊框是否被合並為一個單一的邊框 2 //設置table實線邊框 3 table,td{ 4 /*邊框合並*/ 5 bord

手機端1px細線公共類

webkit rbo otto body html posit htm nsf absolut 手機端1px細線公共類 .borderBottom1px{ position: relative; } .borderBottom1px:after{ cont

細線表格的製作

相關推薦