當前位置:首頁 » 表格製作 » 怎樣給表格加邊框html
擴展閱讀
怎樣調表格的整體行高 2025-06-24 19:24:08

怎樣給表格加邊框html

發布時間: 2022-04-02 19:49:17

⑴ 怎麼設置HTML表格細邊框

一般用表格的時候總會給它個border屬性,比如:<table border="1">,其效果如下:

再給表格加個顏色:

<table border="1px" bordercolor="#000000"cellspacing="0px" style="border-collapse:collapse">

⑵ 如何在html的表格中加入邊框線

在網上找了好幾種方法,結果做完後,效果都不理想,有時候修改表格中的內容後,邊框線就莫名其妙的沒有了。最終試了一下,還是利用加表格背景色的方法還是保險一點。方法如下:

1、在中加入style="background-color:#333333"語句。

2、在後續的中加入style="background-color:#ffffff"語句。

這種方法在寧夏教育公共服務平台中運行,完全可以,但在其他網站中就不太清楚了。

當然,如果有更好的方法,也請大家多多指教。

⑶ html 表格邊框

是不是1象素的邊框?

⑷ 怎麼用CSS設置html中的表格邊框樣式

一、只對表格table標簽設置邊框 - TOP

只對table標簽設置border(邊框)樣式,將讓此表格最外層table一個邊框,而表格內部不產生邊框樣式。

案例詳細如下:

1、對應css代碼

<style>.table-atable{border:1pxsolid#F00}/*css注釋:只對table標簽設置紅色邊框樣式*/style>

2、對應html代碼片段

<divclass="table-a"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>div>

二、對td設置邊框 - TOP

對table表格td設置邊框樣式,表格對象內td將實現邊框樣式,但中間部分td會導致出現雙邊框。

詳細案例教程如下:

1、對應css代碼

<style>.table-btabletd{border:1pxsolid#F00}/*css注釋:只對tabletd標簽設置紅色邊框樣式*/style>

2、對應html源代碼片段

<divclass="table-b"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>

三、對table和td技巧性設置表格邊框 - TOP

如上第二點,只對表格對象td設置單一邊框樣式,中間部分td與td標簽之間就會出現雙邊框現象。

解決方法:對td只設置兩個邊的邊框,對table也設置兩個邊的邊框樣式。

解釋:對td設置左與上邊框,這樣td與td相鄰就會只出現單一邊框樣式,這樣就會出現表格右側和下部沒有邊框,這個時候我們設置table右和下 邊框解決顯示右側和下側td剩下未顯示邊框。

1、對應css代碼:

<style>.table-ctable{border-right:1pxsolid#F00;border-bottom:1pxsolid#F00}.table-ctabletd{border-left:1pxsolid#F00;border-top:1pxsolid#F00}/*css 注釋:只對tabletd設置左與上邊框;對table設置右與下邊框;為了便於截圖,我們將css注釋說明換行排版*/style>

2、對應html源代碼片段:

<divclass="table-c"><tablewidth="400"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>

四、對table和td設置背景,實現完美表格邊框 - TOP

1、基礎設置

1)、先設置tablecss背景為紅色

2)、設置table單元之間間距為1
使用DW軟體輔助設置table表格單元間距為1,具體DW軟體可視化操作步驟簡要說明,首先(視圖模式)選中表格後,對應DW軟體編輯窗口底部會「屬性」面板會出現對應table表格屬性設置地方,我們將「間隔」填寫為「1」。這個時候我們會看到table表格標簽里cellspacing值為「1」(cellspacing="1")。

藉助DW軟體設置表格單元之間間距

直接對

標簽內cellspacing="1"即可,得到:

<tablewidth="400"border="0"cellspacing="1"cellpadding="0">

3)、設置table td背景為白色

2、css代碼:

<style>.table-dtable{background:#F00}.table-dtabletd{background:#FFF}/*css注釋:設置table背景為紅色,td背景為白色*/style>

3、對應html源代碼:

<divclass="table-d"><tablewidth="400"border="0"cellspacing="1"cellpadding="0"><tr><tdwidth="105">站名td><tdwidth="181">網址td><tdwidth="112">說明td>tr><tr><td>DIVCSS5td><td>www.divcss5.comtd><td>CSS學習td>tr><tr><td>CSS5td><td>www.css5.com.cntd><td>CSS切圖td>tr>table>div>

五、css table表格邊框實現總結 - TOP

以上四種方式實現table表格邊框樣式方法,推薦使用第三和第四種方法來解決表格邊框樣式。希望DIVCSS5整理總結html table邊框布局方法對大家有幫助並能掌握,平時需要時靈活運用。

⑸ 如何給表格加邊框

首先用滑鼠選擇需要加邊框的區域,然後點擊滑鼠左鍵,選擇格式,點擊邊框按鈕,選擇要加的邊框形式即可。


下面用Excel 2007演示添加方法:

一、打開Excel,選擇需要添加邊框的區域。


整個界面分大體 分為三部分,軟體最上邊是功能選項卡,以前叫做菜單,左邊是以數字標識的行號,向右是用字母標識的列號,由行列組成的二維表格。

我們選中基本工資下"3000",然後按住單元格的右下角小十字,向下拖即可完成復制填充。也可雙擊填充手柄來完成。其他列的數據自行輸入即可。

⑹ 在html的表格中,怎麼把表格的邊框設置為實線框具體的代碼是什麼謝謝

<style type="text/css">
<!--
.tableborder {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
/*以上分別設置的是表格邊框中上右下左的邊框寬度*/
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
/*設置邊框的表現樣式,solid為實線*/
border-top-color: #0000FF;
border-right-color: #0000FF;
border-bottom-color: #0000FF;
border-left-color: #0000FF;
/*設置邊框的顏色*/
}
-->
</style>
<table width="300" height="100" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder">
<tr>
<td>class="tableborder"是對樣式的調用,寫在table標簽內</td>
<td></td>
</tr>
</table>

⑺ html怎麼設置table邊框

html設置table的邊框的方法是使用border屬性實現。

說明:

  • border 屬性規定表格單元周圍是否顯示邊框。

  • 值 "1" 指示應該顯示邊框,且表格不用於布局目的。

  • 在 HTML5 中,border 屬性僅用於指示表格是否用於布局目的,且只允許屬性值 "" 或 "1"。

完整用法舉例:

1、html中的table代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>table的邊框</title>

</head>

<body>

<table border="1">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$80</td>

</tr>

</table>

</body>

</html>

2、運行後的效果:

⑻ HTML表格邊框的設置

一個簡單的 HTML 表格:

<tableborder="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

定義和用法

<table> 標簽定義 HTML 表格。

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

tr 元素定義表格行,th 元素定義表頭,td 元素定義表格單元。

更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

⑼ 怎麼用CSS設置html中的表格邊框樣式

用CSS設置html中的表格邊框樣式,要設計的樣式非常多,下面舉例說明

工具:

記事本

瀏覽器

方法如下:

CSS代碼:

table-atable{border:1pxsolid#F00}

<!--關鍵代碼:設置表格邊框為1像素,實體,紅色-->

HTML代碼:

<divclass="table-a">
<tablewidth="400"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdwidth="105">站名</td>
<tdwidth="181">網址</td>
<tdwidth="112">說明</td>
</tr>
<tr>
<td>網站名稱</td>
<td>具體網址</td>
<td>網站說明</td>
</tr>
<tr>
<td>網站名稱</td>
<td>具體網址</td>
<td>網站說明</td>
</tr>
</table>
</div>

效果圖如下:

⑽ 如何給html網頁加邊框

定義一個CSS框應用到表格去,表格用100%,這樣你表格裡面在多東西也有邊框了