Table Rows and Columns

HTML tables are a great way to organize and present data on your webpage. Tables consist of rows and columns, similar to a spreadsheet, and they can hold any type of content you want to display. In this tutorial, we'll learn how to create table rows and columns in HTML.

HTML Tables

HTML tables are defined with the <table> tag. Each table is then divided into rows with the <tr> tag and each row is divided into data cells with the <td> tag.

Here's what a basic table structure looks like:

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

This code creates a table with two rows and two columns.

Table Rows

Table rows are created with the <tr> tag. The <tr> tag stands for "table row" and is used to group together one or more <td> or <th> elements into a single row.

Each new <tr> tag creates a new row in the table.

Table Columns

Table columns are defined by the <td> or <th> tags within the <tr> tag. The <td> tag stands for "table data," and it's where you put the actual content of your table. The <th> tag stands for "table header" and is used to label the columns and rows.

Each new <td> or <th> within a <tr> tag creates a new column in that row.

Here is an example of a table with headers:

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

In this example, the first row of the table is used for headers, which label the columns.

That's the basics of creating table rows and columns in HTML! With just these few tags, you can create a wide variety of tables to display your data.

In the next section, we'll learn how to style our tables to make them more visually appealing and easier to read.

Styling Tables

To style your tables, you can use CSS. For instance, you can add borders to your tables and cells, and you can also add padding to your cells to make the content easier to read.

Here's an example of a table with some basic styling:

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

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

In this example, we've added a border to the table and cells, aligned the text to the left, and added padding to the cells. We've also added a background color to every other row to make the table easier to read.

That's it! Now you know how to create and style tables in HTML. Practice creating your own tables and experimenting with different ways to style them.