HTML: A Guide to Hard-Coding
Basic Tables <TABLE>
Tables have two basic and necessary functions:
- to present information
- to layout your page
Most people are familiar with tables in word processing programs. There, tables help to present information clearly and concisely. We can use tables like this in HTML as well. However, tables have an even more important function in HTML--page layout. Remember when we were discussing images and I said that you can't align images center? One of the ways to get around that is to make a table and put the image in the center of a table.
This page, and every other page in my site, was made using tables. Tables help me put things exactly where I want them.
Let's deal with the basics of tables first.
Tables are tagged by <table>. That's easy enough. The hard part about understanding tables is that tables have rows but no columns per se.
Instead of columns, tables have cells. Each cell represents what we think of as columns. Cells are represented by the tag <td>. "td" stands for "table data" because what you put in the cell is your data. Rows only exist as divisions, not real data.
So, the three basic tags for tables are:
<table> <tr> and <td>
Each of these tags has attributes, which we'll see later. Let's make a basic table.
What I have created here is a table with two rows and two columns. So, we have four individual cells that contain data (the numbers 1-4).
Notice that I have spaced out my code with tabs to keep it neat. The browser doesn't read white space, and this way I will be able to find what I need later.
Save and reload in the browser.
This is it. Pretty simple. I could have done this easier just by typing in "1" and then "2" putting in a line break <br> and then typing "3" and "4". That would have been easier, but only for this simple example. Anything more complicated would have required a table.
Some of the attributes of the <table> tag include height and width. If I don't specify height or width the table will be big enough to fit the information, but that's all. It may not be what I want. Again, you can specify height and width as number of pixels or percent. If you use a percent, you need to include quotation marks.
Another attribute is border. If I don't want a border, I don't put one in or I can say border=0. Or, I can use a number to indicate the thickness of the border.
Let's modify the code a bit.
You should now start to see the possibilities for page layout.
You can put anything inside the <td> and </td> tags. You can put text, pictures and even another table.
You can also align the data in your cell. In the above example, all the numbers are aligned vertically center and horizontally left. An attribute of the <td> tag is align=x for horizontal alignment and valign=x for vertical alignment.
There are nine possible positions if you combine vertical and horizontal alignment.
Go on to the next page for more.
