HTML: Tables

Hi there, young web designer! In this tutorial, we're going to learn about HTML tables and how to use them to display organized data on your web pages. Tables are a great way to present information in rows and columns, making it easy to read and understand. Let's get started!

1. Table Elements To create a table in HTML, we'll use the following elements:

• <table>: This element defines the table itself.
• <tr>: Stands for "table row" and defines a row in the table.
• <th>: Stands for "table header" and defines a header cell in the table. Header cells are usually used in the first row to label the columns.
• <td>: Stands for "table data" and defines a regular cell in the table.

2. Creating a Basic Table Here's how to create a simple table with a header row and two data rows:

htmlCopy code
<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>

3. Adding Borders to Your Table By default, tables don't have borders. To add borders to your table, you can use the style attribute with the border property:

htmlCopy code
<table style="border: 1px solid black;">

You should also add the same style attribute to the <th> and <td> elements to apply borders to each cell:

htmlCopy code
<th style="border: 1px solid black;">Header 1</th>
<td style="border: 1px solid black;">Row 1, Cell 1</td>

4. Practice Time Now let's practice creating a table for your web page! Follow these steps:

Step 1: Open the HTML file you created in the previous tutorial or create a new one.

Step 2: Create a table with at least three columns and three rows, including a header row. Add data to each cell and give your table borders using the style attribute. For example:

htmlCopy code
<table style="border: 1px solid black;">
  <tr>
    <th style="border: 1px solid black;">Name</th>
    <th style="border: 1px solid black;">Age</th>
    <th style="border: 1px solid black;">City</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Alice</td>
    <td style="border: 1px solid black;">10</td>
    <td style="border: 1px solid black;">New York</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Bob</td>
    <td style="border: 1px solid black;">12</td>
    <td style="border: 1px solid black;">Los Angeles</td>
  </tr>
</table>

Step 3: Save your file and open it in a web browser to see your table displayed on your web page!

Understanding and using HTML tables is an important skill for organizing and displaying data on your web pages. Keep practicing, and soon you'll be able to create beautiful and functional tables like a pro!