Hawkins Kruse

Creating tables

Using CSS boxes as webpage layout

Here's how:

Now, Let's continue with Part 2. We will discuss the following here:

Creating tables

Using CSS boxes as webpage layout

Here's how:

Creating tables

Tables are very useful in the presentation of data. The following are the html tags to be used to create a basic table:

Single-column table:

row 1 data

row 2 data

Type the above in your mywebpage.html within the body tags, save and refresh your browser. To discover additional info, you are asked to check-out: oc float center. That's the table on the web. Referring to the above html codes, width refers to the width of the whole table (you may also use pixel here like "800"), border is the outside line or outline of the table, cellspacing is the space between the cells, cells are the area where the data are located, cellpadding is the space between border and cells. You may change the values of these table attributes or properties based on your preference or requirement.

Though the above table html codes are still working, W3C.org requires the table properties or attributes be defined in the style sheets or CSS. Using CSS, the above table properties could be presented as follows:

Within style tags in the head:

.type1

width: 400px;

padding: 4px;

margin: 2px;

.border

border: 1px solid #000;

Then, within the body tags:

row 1 data

row 2 data

Looking at the codes, "type1" is preceded by dot (.), meaning it is a class selector. For the next type of table properties or attributes, you may label it as type2, then type3 and so on or with other names you prefer. "border" is also a class selector and "border: 1px solid #000" is the thickness (1px), border type (solid) and color (#00f) of the border. There are more discussions of CSS in "Creating CSS boxes as web page layout" and in "Using CSS in styling your web pages"

If you want to try the above, then type the codes within the style and body tags as noted, save it and refresh your browser. It must be the same as the first one.

Now, let's make a 2-column or multi-column table:

row 1 data 1

row 1 data 2

row 2 data 1

row 2 data 2