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.