Table in HTML – Colspan

Utilize the colspan attribute to make a cell span over multiple columns:


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Table in HTML – Colspan</title>
    <style>
        table, th, td {
            border:1px solid green;
            border-collapse: collapse;
        }
  </style>
</head>
<body>

    <h2>Cell with two columns of space</h2>
    <p>Use the colspan attribute to have a cell span multiple columns.</p>
    <table style=“width:100%”>
      <tr>
        <th colspan=“2”>Student Name</th>
        <th>Student Age</th>
    </tr>
    <tr>
        <td>Jelly</td>
        <td>Joy</td>
        <td>15</td>
    </tr>
    <tr>
        <td>Eva</td>
        <td>Jockly</td>
        <td>17</td>
    </tr>
</table>
</body>

</html>
HTML Table - Colspan

The number of columns to span is indicated by the
colspan attribute’s value.

MR STAR CREATOR

Table in HTML – Rowspan

Utilize the rowspan parameter to make a
cell span across many rows:


Preview:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Table in HTML – Rowspan</title>
    <style>
        table, th, td {
            border:1px solid green;
            border-collapse: collapse;
        }
  </style>
</head>
<body>

    <h2>A cell spanning two rows</h2>
    <p>By using the rowspan attribute, you can make a cell span multiple rows.</p>
    <table style=“width:100%”>
      <tr>
        <th>Student Name</th>
        <td>Joy</td>
    </tr>
    <tr>
        <th rowspan=“2”>Student Phone</th>
        <td>+911234567890</td>
    </tr>
    <tr>
        <td>+91123796540</td>
    </tr>
</table>
</body>

</html>

HTML Table  - Rowspan

The number of rows to span is indicated by the
rowspan attribute’s value.

MR STAR EDIT
Rate this post

Categorized in: