HTML Table Definition and Creation

Introduction

HTML tables are commonly used to display tabular data on web pages. In this lab, you will learn how to create basic HTML tables using the <table>, <tr>, <td>, and <th> tags.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

This is a Guided Lab, which provides step-by-step instructions to help you learn and practice. Follow the instructions carefully to complete each step and gain hands-on experience. Historical data shows that this is a beginner level lab with a 85% completion rate. It has received a 100% positive review rate from learners.

Creating the Table

Let's begin by creating a new HTML file called index.html and setting up the basic structure. Within the <body> tags, create a <table> element. This element will contain all the rows and columns of your table.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

Defining Rows

Next, define the rows of your table using the <tr> tag. Each row will contain one or more cells. To create a single cell, use the <td> tag.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Adding a Table Header

In some cases, you may want to add a header row to your table. To do this, use the <th> tag instead of the <td> tag.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Adding Borders and Styles

By default, HTML tables have minimal styling and no borders. To add a border to your table, use the CSS border property.

<!doctype html>
<html>
  <head>
    <title>HTML Table Tutorial</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2 Cell 1</td>
        <td>Row 2 Cell 2</td>
      </tr>
    </table>
  </body>
</html>

Summary

By following this tutorial, you have learned how to create a basic HTML table and style it using CSS. Tables can be further customized by adding attributes such as colspan and rowspan to cells, and by using additional tags such as <caption> and <thead>. With these tools, you can create complex and informative tables to display data on your web pages.