Slide 1 Slide 2 Slide 3 Slide 4 Slide 5

Module 1:8 HTML - Understanding Tables

byAmurChem -
0

Module 1:8 HTML - Understanding Tables

HTML Tables

HTML tables allow web developers to arrange data into rows and columns, creating an organized and structured layout for data presentation.

Example

Here's an example of a simple HTML table:

Campuses
 Contact Address
Girja Campus
 +923045881292 FFS, Girja Road
Harley Campus
 +923351560916 FFS Harley Road
Malik Colony Campus
 +923285545305 FFS Malik Colony
Baraf Khana Campus
 +923085970305 FFS Baraf Khana Chowk

Define an HTML Table

A table in HTML consists of table cells inside rows and columns. Here's how to define a simple HTML table:

        <table>
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Address</th>
          </tr>
          <tr>
            <td>Girja Campus</td>
            <td>+923045881292</td>
            <td>FFS, Girja Road</td>
          </tr>
          <tr>
            <td>Harley Campus</td>
            <td>+923351560916</td>
            <td>FFS Harley Road</td>
          </tr>
        </table>

Table Cells

Each table cell is defined by a <td> and a </td> tag. <td> stands for table data. Everything between <td> and </td> is the content of the table cell.

        <table>
          <tr>
            <td>Harley Campus</td>
            <td>+923351560916</td>
            <td>FFS Harley Road</td>
          </tr>
        </table>

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag. <tr> stands for table row.

        <table>
          <tr>
            <td>Girja Campus</td>
            <td>+923045881292</td>
            <td>FFS, Girja Road</td>
          </tr>
          <tr>
            <td>Harley Campus</td>
            <td>+923351560916</td>
            <td>FFS Harley Road</td>
          </tr>
        </table>

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag. <th> stands for table header.

        <table>
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Address</th>
          </tr>
          <tr>
            <td>Girja Campus</td>
            <td>+923045881292</td>
            <td>FFS, Girja Road</td>
          </tr>
          <tr>
            <td>Harley Campus</td>
            <td>+923351560916</td>
            <td>FFS Harley Road</td>
          </tr>
        </table>

By default, the text in <th> elements are bold and centered, but you can change that with CSS.

HTML Tables: Colspan and Rowspan

HTML tables can have cells that span over multiple rows and/or columns, allowing for more complex table structures.

Example of Colspan

To make a cell span over multiple columns, use the colspan attribute:

Name Age
Jill Smith 43
Eve Jackson 57

Note: The value of the colspan attribute represents the number of columns to span.

<table border="1">
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>

Example of Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Name Jill
Phone 555-1234
555-8745 
<table border="1">
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
  </tr>
</table>

Note: The value of the rowspan attribute represents the number of rows to span.


🔗 Other Useful Links

© 2025 AmurChem. All rights reserved.

Tags

You may like these posts

Post a Comment

Previous Post Next Post