A Smarter Way To Learn HTML & CSS(2015)

41
Tables: basic structure

All the HTML code for a table is enclosed in an opening and closing tag.

<table>
[The details of the table go here.]
</table>

Within those tags you create rows and columns. Here’s a table with two rows and two columns.

<table>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tr>
</table>

This is what the table looks like (with a border that I added to make the rows and columns stand out).

Unless you style a border explicitly, most browsers display it without borders, like this.

You’ll learn how to add borders, if you want them, in a later chapter, and to style tables so they’re more attractive. For now, let’s get you familiar with this barebones structure.

As you can see from the HTML code, you build a table a row at a time. You create a row using the <tr> (for “table row”) tag. Then you create all the cells within that row using the <td> (for “table data”) tag.

All the text content of a table cell is enclosed between the opening tag and the closing <td> tag. The opening <tr> tag and closing </tr> tag don’t enclose any text content. They only contain the <td> tags and their text content.

All opening tags are paired with closing tags.

Each row must have the same number of cells, created with the <td> and </td> tags, even if some of the cells are empty. To create this table, with nothing in row 2, column 1…

...you'd write...

<table>
<tr>
<td>Apples</td>
<td>Oranges</td>
</tr>
<tr>
<td></td>
<td>Pears</td>
</tr>
</table>

Notice that all the <tr> tags are indented two spaces inside the <table> tag, and the <td> tags are indented two spaces inside the <tr> tags.

In your HTML file code a table with two rows and two columns. Save the file. Display the page.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-41-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/41.html