Web Develop > Tables - Lesson - 05

Table is a matrix like object that holds other objects such as text, images, buttons and etc. Even if you don't see them they are present in all professional web pages. Hidden tables hold graphic images and text in their places in these pages.



Drawing a Table

To draw a table we will use "TABLE" tag. We will need two other related tags to make table rows and columns. These are "TR" and "TD" tags. "TR" tag is used to create a row in table. Data that will fit in a row will be enclosed in "TR" "/TR" tags.

If you browse this code in a browser you may surprise. You will not see any table but two lines of code. In fact table is there but you cannot see it.

"TABLE" Tag will not make table borders. You must use a parameter to add borders to the table.
You can specify a border width for a table by adding a border parameter to "TABLE" tag.
As you may guess default border size is 0. When we do not specify sizes for a table it will be in a size that it needs to be able to fit text or any other object that it will hold.


Specifying Table Sizes

You can specify width for a table both in percents of page width and in pixels.
You can specify table height too. In this way you can determine height and width of table. Width and height of table will be divided between cells in rows and columns so if table width is 100 and there are 2 columns then width of each cell will be 50. Just pay attention to this important point that if you put a lot of text in a cell of a table it will be expanded to fit the text in it.


Text alignment in Table Cells

By default text entered in a cell will appear at the left side of the cell. You can add either of these options to "TD" tag to specify horizontal alignment of text.

As we saw, left alignment is default for cells. You can also determine vertical alignment of text in a cell by adding VALIGN option to "TD" tag. There are three values for VALIGN option : TOP, BOTTOM and MIDDLE. MIDDLE is default value if you do not use this parameter.


Images in Table Cells

You will soon need to insert images in table cells. As we told later tables will be used to hold images in their places. You can insert an image in a table cell by inserting "IMG" tag between "TD""/TD" tags of a certain cell.