HTML Tables




  • The <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

Syntax of HTML Table

<table>
  // table content
</table>

Key Elements of HTML Table

  • <table>: Defines the table itself.
  • <tr>: Used for table rows.
  • <th>: Used for table headings.
  • <td>: Used for table cells (data).

Basic Table Structure

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Harry</td>
    <td>100</td>
  </tr>
</table>

Rowspan Attribute

  •  If you want a table cell to span multiple rows, you can use the rowspan attribute.

<td rowspan="value">

Colspan Attribute

  •  If you want a table cell to span multiple columns, you can use the colspan attribute.

<td colspan="value">

Visual Representation of Rowspan and Colspan

Rowspan and Colspan in HTML tables

<table>
        <thead>
            <tr>
                <th colspan="7">timetable</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="6">hours</td>
                <td>Mon</td>
                <td>Tue</td>
                <td>Wed</td>
                <td>thr</td>
                <td>Fri</td>
                <td>Sat</td>
            </tr>
            <tr>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
            </tr>
            <tr>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
            </tr>
            <tr>
                <td colspan="6">Lunch</td>
            </tr>
            <tr>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td rowspan="2">Games</td>
            </tr>
            <tr>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
            </tr>
        </tbody>
    </table>





Related Posts:

  • Ordered List HTML Ordered ListAn ordered list is used to create a list of items in a specific order, typically indicated by numbers.SyntaxKey PointsOrdered l… Read More
  • Unordered List HTML Unordered ListAn unordered list is a list of items that are not arranged in any specific, sequential order. Unlike ordered lists, the items… Read More
  • Definition Lists A Definition List in HTML is used to represent a list of terms along with their corresponding descriptions or definitions. The Definition List i… Read More
  • figure tag The figure element is particularly useful for images, illustrations, diagrams, videos, audio clips, and other types of media.Use the alt attribu… Read More
  • HTML Lists Types of HTML ListsUnordered List: An unordered list is used to create a list of items that are not in any particular order. Each list item… Read More

0 Comments:

Post a Comment

Do leave your comments