HTML表格如何設定邊框樣式

清浅
發布: 2019-04-11 10:29:02
原創
47309 人瀏覽過

HTML表格設定邊框樣式的方法有:可以透過border屬性設定邊框的粗細以及顏色樣式,另外也可以設定表格儲存格的間距與邊距以及合併邊框來美化表格

在HTML中我們可以為表格添加邊框樣式,接下來將在文章中為大家詳細介紹如何設定表格的邊框樣式,具有一定的參考作用,希望對大家有所幫助。

HTML表格如何設定邊框樣式

【推薦課程:HTML教學

對剛學習HTML的人來說,我們常常會用到表格

標籤,但是對於表格的邊框設定還是有很多問題不明白,接下來將在下文中具體介紹

#對於邊框的設定我們可以透過border屬性來實現,例如給表格一個1px邊框我們可以這樣設定:

<table border="1px solid #ccc">
登入後複製

效果圖:

HTML表格如何設定邊框樣式

從上圖我們可以發現這樣設定只有表格的外邊框才有,裡面的儲存格都沒有邊框,所以我們也要給內部的儲存格設定邊框

 table,table tr th, table tr td { 
       	border:1px solid #ccc;
       	 }
登入後複製

效果圖:

HTML表格如何設定邊框樣式

我們可以透過設定cellspacing(儲存格間距), cellpadding(儲存格邊距)以及border-collapse: collapse (邊框合併)使表格的邊框合併為一個單一的邊框,使得表格更加美觀該屬性設定表格的邊框是否被合併為一個單一的邊框,還是像在標準的HTML 中那樣分開顯示使表格更加美化

<style>
       table,table tr th, table tr td { 
       	border:1px solid #ccc;
       	 }
       table{ 
       	width: 400px;
       	border-collapse: collapse;
    }   
    </style>
    <table  cellpadding="0";cellspacing="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>
        <tr>
        	<td>内容</td>
        	<td>内容</td>
        	<td>内容</td>
        </tr>
    </table>
登入後複製

#圖:

Image 047.png

同樣透過設定border屬性也可以更改表格邊框的顏色

本文參考:https://www. html.cn/doc/html/table/

總結:以上就是這篇文章的全部內容了,希望對大家有幫助


以上是HTML表格如何設定邊框樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板