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.com/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.com/static/images/simply-easy-learning.png"
    border='4'>
      TutorialsPoint
   </object>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
border
html_attributes_reference.htm
广告