HTML Tables

• HTML Tables allow you to arrange data into rows and columns on a web page, making it easy to display information like schedules, statistics, or other structured data in a clear format.

• We have some tags that we use inside the table tag. They are

  • <tr> to define table rows,

  • <th> for table headers, and

  • <td> for table data cells

• In each <tr>, a row is represented, and within each row, <th> or <td> tags represent the cells in that row, which can contain text, images, lists, or even another table. Later, we can style them using CSS like bordering, colspan, rowspan.

<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Sri</td>
        <td>Parthu</td>
        <td>24</td>
    </tr>
    <tr>
        <td>Sri</td>
        <td>Ram</td>
        <td>32</td>
    </tr>
    <tr>
        <td>Sai</td>
        <td>Krihna</td>
        <td>41</td>
    </tr>
</table>

In this example:

• <table>: This tag starts the table. Everything between the opening <table> and closing </table> tags makes up the table.

• <tr>: Stands for “table row.” Each <tr> tag defines a row in the table.

• <th>: Stands for “table header.” It’s used for the headers of the columns. In this case, “Firstname,” “Lastname,” and “Age” are headers. Text in <th> tags is usually bold and centered by default.

• <td>: Stands for “table data.” This tag is used for actual data cells under each column. For instance, “Sri” is the data under the “Firstname” header, “Parthu” under the “Lastname,” and “24” under the “Age.”

• The first <tr> has three <th> elements, setting up the column titles.

• The subsequent <tr> tags each contain three <td> elements, representing the data for each person listed in the table.

Rowspan and Colspan attributes

• This rowspan and colspan are used to merge the columns and rows into a line.

<table>
        <tr>
            <th colspan="4">New Employees Records</th>
        </tr>
        <tr>
            <th>Name</th>
            <th colspan="2">Jobs</th>
            <th>Working Experience</th>
        </tr>
        <tr>
            <td>John</td>
            <td>Software Engineer</td>
            <td>Data Analyst</td>
            <td rowspan="2">5 Years</td>
        </tr>
        <tr>
            <td>Ale</td>
            <td colspan="2">Senior Web developer</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>Junior Tech Writer</td>
            <td>Blogger</td>
            <td>6 Months</td>
        </tr>
    </table>

Explanation of the code:

• This HTML code creates a table to display "New Employees Records" using attributes like colspan and rowspan for merging cells. Here's a breakdown of its structure:

  1. Table Header Row:

    <tr>
        <th colspan="4">New Employees Records</th>
    </tr>
  

  • Purpose: Displays the title of the table, "New Employees Records."

  • <th>: defines a header cell.

  • colspan="4": Merges four columns into one, making the title span across the entire table width.

2. Column Headings:

    <tr>
        <th>Name</th>
        <th colspan="2">Jobs</th>
        <th>Working Experience</th>
    </tr>

• Defines the column headers:

  • Name: A single column for employee names.

  • Jobs: Merges two columns under one header using colspan="2".

  • Working Experience: A single column for experience.

3. First Data Row:

    <tr>
        <td>John</td>
        <td>Software Engineer</td>
        <td>Data Analyst</td>
        <td rowspan="2">5 Years</td>
    </tr>

• John: Data for the "Name" column.

• Software Engineer and Data Analyst: Occupy the two columns under "Jobs."

• 5 Years: Merges vertically with the next row using rowspan="2", indicating John and Ale both have 5 years of experience.

4. Second Data Row:

    <tr>
        <td>Ale</td>
        <td colspan="2">Senior Web developer</td>
    </tr>

• Ale: Data for the "Name" column.

• Senior Web Developer: Spans across two columns under "Jobs" using colspan="2".

• The "Working Experience" column is already occupied by the rowspan from the previous row.

5. Third Data Row:

    <tr>
        <td>Jack</td>
        <td>Junior Tech Writer</td>
        <td>Blogger</td>
        <td>6 Months</td>
    </tr>

• Jack: Data for the "Name" column.

• Junior Tech Writer and Blogger: Data for the two columns under "Jobs."

• 6 Months: Data for "Working Experience," without merging.

Attributes Used:

1. colspan:

   • Used to merge multiple columns into one.

   • Example: "Jobs" header spans two columns (colspan="2").

2. rowspan:

   • Used to merge multiple rows into one.

   • Example:⁣"5 Years" spans across two rows.rowspan="2"

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥