HTML Table Colspan & Rowspan

0
13K

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
Cerca
Categorie
Leggi tutto
Formazione
VLOOKUP FUNCTIONS
VLOOKUP is a powerful function in Excel that allows you to search for a value in a table and...
By Microsoft Excel 2024-09-23 20:04:52 0 13K
Technology
Understanding Information Technology Ethics
Information Technology (IT) ethics is a branch of ethics that focuses on the ethical issues and...
By ALAGAI AUGUSTEN 2024-07-13 07:12:07 0 13K
Computer Programming
Scripts, Modules, Math Module, and Escape Sequences in Python
1. Scripts In Python, a script is a file containing Python code that is intended to be executed....
Physics
UACE WAKISSHA PHYSICS PAPER 1 2024
UACE WAKISSHA PHYSICS PAPER 1 2024
By Landus Mumbere Expedito 2024-08-01 13:12:24 0 12K
Altre informazioni
Clear the Clutter
 A Word of Encouragement Life is a journey filled with ups and downs, triumphs and...
By ALAGAI AUGUSTEN 2024-08-10 12:44:57 0 10K
Talksphare https://talksphare.com