HTML - span 属性



HTML span 属性用于指定<col><colgroup> 元素应跨越的列数。

span 属性用于跨越列,当我们对<col><colgroup> 元素应用 CSS 属性时,span 允许我们将相同的 CSS 属性应用于多个列。

语法

<tag span="2">

应用于

以下列出的元素允许使用 HTML span 属性。

元素 描述
<colgroup> HTML <colgroup> 标签用于描述表格中一列或多列的集合,用于格式化。
<col> HTML <col> 标签用于提供有关列的信息。

HTML span 属性示例

以下示例将说明 HTML span 属性,以及我们应该在哪里以及如何使用此属性!

在 <colgroup> 元素上实现背景颜色

在以下示例中,我们将使用 span 属性通过一次选择使用 <colgroup> 的列来设置前三列的背景颜色。

<!DOCTYPE html>
<html>

<head>
      <!-- Used to set the border on the table -->
      <style>
         table,
         th,
         td {
            border: 1px solid gray;
         }
      </style>
</head>

<body>
      <h3>HRML span Attribute</h3>
      <table>
         <colgroup span="3" 
                   style="background:green">
         </colgroup>
         <tr>
            <th>Course</th>
            <th>Enroll Date</th>
            <th>Status</th>
            <th>Certificate</th>
         </tr>
         <tr>
            <td>HTML</td>
            <td>30th May</td>
            <td>Learning</td>
            <td>Not Issued</td>
         </tr>
         <tr>
            <td>CSS</td>
            <td>31st May</td>
            <td>Learning</td>
            <td>Not Issued</td>
         </tr>
      </table>
</body>

</html>

在 <col> 元素上实现背景颜色

在以下示例中,我们将使用 span 属性通过分别选择使用 <col> 的列来设置前两列的背景颜色。

<!DOCTYPE html>
<html>

<head>
      <!-- Used to set the border on the table -->
      <style>
         table,
         th,
         td {
            border: 1px solid gray;
         }
      </style>
</head>

<body>
      <h3>HRML span Attribute</h3>
      <table>
         <colgroup> 
            <col span="2" style="background-color:green"> 
            <col style="background-color:yellow">
        </colgroup>
         <tr>
            <th>Course</th>
            <th>Enroll Date</th>
            <th>Status</th>
            <th>Certificate</th>
         </tr>
         <tr>
            <td>HTML</td>
            <td>30th May</td>
            <td>Learning</td>
            <td>Not Issued</td>
         </tr>
         <tr>
            <td>CSS</td>
            <td>31st May</td>
            <td>Learning</td>
            <td>Not Issued</td>
         </tr>
      </table>
</body>

</html>

支持的浏览器

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

© . All rights reserved.