Creating Tables in HTML | HTML5 for Web Development - Software Development PDF Download

Introduction

HTML (Hypertext Markup Language) is the standard language used for creating web pages. One of the key elements in HTML is the table, which allows you to present data in a structured and organized format. In this article, we will guide you through the process of creating tables in HTML, providing you with examples and explanations along the way.

Table Structure in HTML

To create a table in HTML, you need to use a combination of HTML tags. The basic structure of an HTML table consists of the following tags:

• '<table>': This tag represents the entire table.
• '<tr>': Stands for table row. This tag defines a row in the table.
• '<td>': Represents a table cell. It defines the data within a table row.
• '<th>': Stands for table header cell. It is used to define the header cells in a table.

Let's dive into some examples to illustrate the different components of an HTML table.

Example 1: Simple Table

<table>

  <tr>

    <th>Header 1</th>

    <th>Header 2</th>

  </tr>

  <tr>

    <td>Data 1</td>

    <td>Data 2</td>

  </tr>

</table>

Output:

Explanation: In this example, we create a basic table with two columns and two rows. The '<table>' tag represents the entire table. Inside the table, we have two rows ('<tr>'). The first row contains the table headers ('<th>'), and the second row contains the data cells ('<td>'). Each header and data cell is enclosed within their respective tags.

Example 2: Table with Caption and Colspan

<table>

  <caption>Employee Data</caption>

  <tr>

    <th>Employee ID</th>

    <th colspan="2">Employee Name</th>

  </tr>

  <tr>

    <td>001</td>

    <td colspan="2">John Doe</td>

  </tr>

  <tr>

    <td>002</td>

    <td colspan="2">Jane Smith</td>

  </tr>

</table>

Output:

Employee Data

| Employee ID |     Employee Name     |

|-------------|----------------------|

|    001      |      John Doe        |

|    002      |      Jane Smith      |

Explanation: In this example, we introduce a '<caption>' tag to add a title to the table. The 'colspan' attribute is used to specify that a header or data cell should span multiple columns. In the second row, the header cell "Employee Name" spans across two columns using 'colspan="2"'. Similarly, in the subsequent rows, the data cells "John Doe" and "Jane Smith" also span across two columns.

Example 3: Table with Border and Cell Padding

<table border="1" cellpadding="5">

  <tr>

    <th>Item</th>

    <th>Quantity</th>

  </tr>

  <tr>

    <td>Apple</td>

    <td>3</td>

  </tr>

  <tr>

    <td>Orange</td>

    <td>5</td>

  </tr>

</table>

Output:

Explanation: Here, we add the 'border' attribute to the '<table>' tag to create a border around the table. The 'cellpadding' attribute specifies the padding between the content of the cells and the cell borders. In this case, we set it to '5' pixels. This example shows a simple table with a border and padding applied.

Sample Problems

Problem 1: Create a table to display a student's grades for three subjects: Math, English, and Science. The student scored 90, 85, and 95 in the respective subjects.

<table>

  <tr>

    <th>Subject</th>

    <th>Grade</th>

  </tr>

  <tr>

    <td>Math</td>

    <td>90</td>

  </tr>

  <tr>

    <td>English</td>

    <td>85</td>

  </tr>

  <tr>

    <td>Science</td>

    <td>95</td>

  </tr>

</table>

Problem 2: Create a table with two columns: Product and Price. Display two products - A and B, with prices $10 and $15, respectively.

<table>

  <tr>

    <th>Product</th>

    <th>Price</th>

  </tr>

  <tr>

    <td>A</td>

    <td>$10</td>

  </tr>

  <tr>

    <td>B</td>

    <td>$15</td>

  </tr>

</table>