~Welcome to My Homework Pages~

Welcome image.


This is my homework page for WebTech University HTML201 Frames. I will be putting what I have learned from my lessons into practice here upon these pages. So my learning continues....

Heading image.Tables -Lesson One

Getting Started

Some basic table structure is a must to learn as to what tags make up its foundation. The basic <table></table> tags hold together other tags that compile what your table consists of, as in rows <tr></tr> and data <td></td>. One might refer to the data elements as cells.

Row One, Data One Row One, Data Two
Row Two, Data One Row Two, Data Two

You can control the appearance of your tables by adding attributes to the table tag...in any order, as long as they are separated by a single space; <table width="X" border="X" align="center" cellpadding="X"> . I thought I'd show that even by putting a table into a paragraph, you can make the heading hug the table as if you had used the caption tag. Interesting  how you can achieve the same effect in different ways.

Most Useful Attributes of a Table
Table Attribute Description Tag
Width This attribute specifies the width of a table. As a number (width="x"), this attribute denotes a fixed width in pixels. (A pixel is the smallest dot your monitor can register.) The table remains that width at all times, no matter how wide your browser window is. Table width can also be followed by a percent sign, in which case the width is a fraction of the width of your browser window. For example, if you set the width at 50 percent (width="50%"), your table remains half the width of the user's browser window. width="X" (or "X%")
Border With this attribute, you can increase the width of the border that surrounds your table. The width is measured in pixels. If you set border to 0, your table's borders become invisible. border="X" align="left"
("right" or "center")
Cellspacing This attribute allows you to specify the distance in pixels between each cell. A small value like 1 means that each cell is almost touching the next cell. A larger value means that each cell is far apart from its neighbours (both horizontally and vertically). cellspacing="x"
Cellpadding This attribute lets you specify a distance in pixels inside a cell, between the cell wall and its contents. A small value means that the text inside a cell may touch the cell wall; a larger value creates a fixed horizontal and vertical margin around the text. cellpadding="x"

<- HOME

Next page.

Html 201-Tables Lessons Html 101 Lessons WebTech University Html 201-Frames Lessons Html 201-Forms Lessons