How to Code - A Beginner's Guide

Chapter 4 - An Introduction to Tables

Vocabulary:

Table: A table is essentially an excel spreadsheet on your page. It divides the page content into a number of cells, each of which can be formatted or customized, and some can even contain their own tables, called Nested Tables [which we will get into next chapter].

Row: This is the Horizontal identifier for a table cell, marked by the <tr> tag. Each tag represents its own row in the table.

Column: This is the vertical division created by the <td> tag within the row, and comes into play the most with a particular <td> attribute, which will be covered in greater detail in the next chapter.

Cell: This is the specific box created by each <td> tag. They can vary widely in size, and contain the table's content.

Padding: The space between the edges of the cell's content and the edge of the cell. Measured in Pixels. This is a table attribute.

Border: The border of the table and all the cells contained within it. Measured in Pixels. This is a table attribute.

Spacing: The amount of space between each of the table's cells. Measured in Pixels. This is a table attribute.

Tags:

<table>,</table>

<tr>,</tr>

<td>,</td>

Lesson 1: Creating a Table.

This on its own is fairly simple, though tables can get confusing in the code when you start dealing with nested tables, so generally it is a good idea to leave comment tags, and line-breaks in the code, as shown here.

Note: You can replace the content of the comment tags (<!---->) with whatever message you want. The important thing is that you leave the <!-- --> in the tag so it becomes easier to spot while scanning your code later.

-------------------------------------------------------------

<table> <!--'Table begins here'-->

<tr> <!--Table Row #1, Four Cells-->

<td>Content</td>

<td>Content</td>

<td>Content</td>

<td>Content</td>

</tr> <!--End of Row #1-->

<tr> <!--Table Row #2, Four Cells-->

<td>Content</td>

<td>Content</td>

<td>Content</td>

<td>Content</td>

</tr> <!--End of Row #2-->

</table> <!--Table Ends Here-->

--------------------------------------------------------------

Self-Learning Exercise #1

Use a table to format your existing web-page, or create a new web page formatted with a table. For this excersize you will only be using a single table for the entire page.

The <td> tag can contain any of the HTML tags that you have been practicing with so far.

Be aware, that this is the easy part when it comes to working with tables, and the more of them that get used within a page, the more complicated the page's code will become. The comment tags will become a necessity in navigating through the code.