HTML表格如何設定邊框樣式-html教學-PHP中文網

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