Code Punk -- Lesson 27 - Basic Tables

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

Home	<Code_Punk>'s Web Tutorials

Website Development and Management

Downloads & Resources

Lesson 27: Basic Tables

Anatomy Of A Table

A table is an organized presentation of data in rows and columns. HTML has a special set of tags and attributes for making tables. Below is a diagram of the parts of a table.

Tables can become very complex and are a popular way to layout web pages. They are particularly good at making columns on web pages. Lets start at the beginning and try to make the table pictured above.

Basic Table Tags

Tables are coded with HTML tags in the <body> of your page. There are three primary tags used in making tables. The first is the <table> tag. All of the rows and cells in a table are all nested inside the <table> and </table> tags.

We'll start making our first table by coding the <table> tags:

<body>

<table>

The whole table will go between these tags

</table>

</body>

Nothing tricky here. The <table> tags define the table as opposed to other content in the <body>. You can code any content you want outside the <table> tags and they'll be displayed outside the table as usual.

Next we'll make the "rows". Rows go across the page and are made with <tr>, or Table Row, tags. In our example there are two rows. We'd code these rows like this:

<table>

<tr>
The cells will go in here. It's the cells that contain the content. Cells 1 and 2 will be in this row.
</tr>

<tr>
This will make the second row for Cell's 3 and 4.
</tr>

</table>

First notice that we've used two sets of <tr> and </tr> tags. Each set makes one row. The above code defines two rows for our <table>. Columns are made by the Table Data tags, the <td> tags. These tags make the cells, columns, and hold the content.

Note that content, like text, does *not* go between either the <tr> or <table> tags themselves. It goes inside the <td> tags.

And that is all it takes to make a simple two row, two column (2x2) table like the one at the top of this page. Things to remember:

Begin by making the <table> tags. All of the table's content and tags go between these two parent tags.

Next, count off the number of rows you need and code <tr> tags between the <table> tags to make these rows.

Now insert <td> tags to make the individual cells which will hold the content.

It's the combination of <td>s and <tr>s that make columns. At this point, always use the same number of <td>s in each row (<tr>).

Content goes between the <td> tags. You can use any type of content you like -- styled text, images, links...

Exercises

Make the <table>s below before moving on. Note that the tables you code will be to the left of the page when viewed in a browser. We'll see how to center them in the next lesson. Worry about coding the basic table for now.

Remember that <tr>s make rows and <td>s make cells, columns, and hold content.

Cell #1	Cell #2
Cell #3	Cell #4
Cell #5	Cell #6

Cell #1	Cell #2	Cell #3
Cell #4	Cell #5	Cell #6

After making the tables above, do some experimenting with larger tables with more rows and columns. Try putting more text than "Cell #x" in the cells. Put an image in a cell. (Hint: just nest an <img> tag inside the <td> tags.)

Continue To Lesson 28 -- Sizing & Aligning Tables >>>

<<< Back To Advanced HTML Index

<Code_Punk>'s Web Tutorials