HTML - 邊框屬性

HTML 的 border 屬性用於指定表格元素周圍邊框的寬度，但它已被棄用，建議使用 CSS 進行樣式設定。

此功能可以改進網頁的樣式和結構，對於修改元素的視覺外觀特別有用。

語法

<tag border = "value"></tag>

應用於

以下列出的元素允許使用 HTML bgcolor 屬性。

元素	描述
<img>	HTML <img> 標籤用於在文件中新增圖片。
<table>	HTML <table> 標籤允許我們透過提供行和列的功能來以組織化的方式排列資料。
<object>	HTML <object> 用於在網頁上顯示多媒體，包括音訊、影片、圖片、PDF 和 Flash。

HTML border 屬性示例

以下程式碼演示了 border 屬性的用法。

表格元素的邊框

在下面的程式中，我們在 <table> 標籤內使用 HTML 'border' 屬性來設定整個表格的邊框。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML border attribute</title>
</head>

<body>
   <!-- Example of the HTML 'border' attribute -->
   <h3>HTML 'border' attribute with table</h3>
   <p>User details</p>
   <table border='1'>
      <tr>
         <th>S.No</th>
         <th>Name</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>1.</td>
         <td>Revathi</td>
         <td>22</td>
      </tr>
      <tr>
         <td>2.</td>
         <td>Sarika</td>
         <td>22</td>
      </tr>
   </table>
</body>

</html>

img 元素的邊框

考慮另一種情況，我們將 img 標籤與 border 屬性一起使用。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML border attribute</title>
   <style>
      img {
         width: 300px;
      }
   </style>
</head>

<body>
   <!-- Example of the HTML 'border' attribute -->
   <h3>Example of the HTML 'border' attribute with img</h3>
   <img src=
"https://tutorialspoint.tw/html/images/html-mini-logo.jpg" border='5'>
</body>

</html>

object 元素的邊框

在這個程式中，我們使用 ‘object’ 元素定義外部資源的容器。然後，我們在 <object> 標籤內使用 ‘border’ 屬性來設定 ‘object’ 元素的邊框。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML border attribute</title>
   <style>
      object {
         width: 200px;
         height: 100px;
      }
   </style>
</head>

<body>
   <!-- Example of the HTML 'border' attribute -->
   <h3>Example of the HTML 'border' attribute with object</h3>
   <object data=
"https://tutorialspoint.tw/static/images/simply-easy-learning.png"
    border='4'>
      TutorialsPoint
   </object>
</body>

</html>

支援的瀏覽器

屬性
border	是	是	是	是	是

html_attributes_reference.htm

列印頁面