HTML Table Colspan & Rowspan

0
8K

HTML Table Colspan and Rowspan

Colspan and rowspan are attributes used to merge cells in a table.

Colspan

  • Purpose: Merges multiple columns into a single cell.
  • Attribute: colspan
  • Example:
    HTML
    <table>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th colspan="2">Quantity</th>
      </tr>
      <tr>
        <td>Product A</td>
        <td>$100</td>
        <td>10</td>
        <td>20</td>
      </tr>
    </table>
    
    In this example, the third header cell spans two columns.

Rowspan

  • Purpose: Merges multiple rows into a single cell.
  • Attribute: rowspan
  • Example:
    HTML
    <table>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
      </tr>
      <tr>
        <td rowspan="2">Product A</td>
        <td>$100</td>
        <td>10</td>
      </tr>
      <tr>
        <td>$200</td>
        <td>20</td>
      </tr>
    </table>
    
    In this example, the first cell in the second row spans two rows.

Important Notes

  • Header Cells: If you use colspan or rowspan with header cells, ensure that the scope attribute (col or row) is set correctly to provide accurate information for assistive technologies.
  • Cell Content: Cells that span multiple rows or columns should typically contain content that is relevant to all the merged cells.
  • Complex Tables: For complex tables with multiple levels of merging, it's often helpful to plan the structure carefully before creating the HTML.

By effectively using colspan and rowspan, you can create more efficient and visually appealing table layouts, especially for tables with repetitive or grouped data.

Like
2
Search
Categories
Read More
Business
Small Businesses: The Backbone of the Economy and Pillars of Community Growth
In the intricate fabric of our global economy, small businesses are the threads that hold it...
By ALAGAI AUGUSTEN 2024-08-03 15:15:09 0 7K
Technology
Cybersecurity
Cybersecurity involves protecting computer systems, networks, and data from digital attacks,...
By ALAGAI AUGUSTEN 2024-07-15 18:06:32 0 8K
Technology
HTML Tutorial
HTML Tutorial
By Mpatswe Francis 2024-08-17 17:37:28 0 6K
Business
Tips and Tricks of Business Automation
Automation drives innovation, addressing the needs of various industries. Choosing intelligent...
By ALAGAI AUGUSTEN 2024-07-20 18:37:16 0 8K
Education
Reconstruction (Lecture)
Reconstruction Era (1865-1877) The Reconstruction Era was a period of immense change and...
By Modern American History 2024-07-19 05:37:05 0 6K
Tebtalks https://tebtalks.com