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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TablesGroup(["`Tables`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TablesGroup -.-> html/tables("`Table Structure`") html/TablesGroup -.-> html/tbl_access("`Table Accessibility`") subgraph Lab Skills html/basic_elems -.-> lab-70852{{"`HTML Table Definition`"}} html/head_elems -.-> lab-70852{{"`HTML Table Definition`"}} html/tables -.-> lab-70852{{"`HTML Table Definition`"}} html/tbl_access -.-> lab-70852{{"`HTML Table Definition`"}} end

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>

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.

HTML Table Definition