span

span

The <span> element in HTML is an inline container used for grouping text or elements, allowing for styling and manipulation. Common attributes include class, id, style, title, lang, and custom data-* attributes. These attributes enhance the flexibility of content presentation and interactivity without disrupting the flow of text.

Syntax

<span attribute1="value" attribute2="value" ...>Content</span>

Example

Col

• Here, the first two columns should have a background color of red:

<table>
  <colgroup>
    <col span="2"  style="background-color: red;">
    <col style="background-color: yellow;">
    <col>
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

Colgroup

• Set the background color of the first two columns using the span attribute in the <colgroup> element:

<table>
  <colgroup span="2" style="background:red"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

conclusion

The <span> element is a versatile inline container used for grouping content, enabling styling and interaction without disrupting the flow of text. It works well with attributes like class, id, and style for dynamic presentation. Additionally, the span attribute in <colgroup> allows for efficient styling of multiple table columns.