HOW A HTML WEBPAGE IS STRUCTURED

Formatting the page - Let's speak about tables - Tables' features

FORMATTING with CSS
by Lino Bertuzzi

To study this section you should know how a basic HTML page is made and how it does works, otherwise you should study this subject (click here) before you read this article.

Let's confine ourselves to the fundamental concepts, leaving out the abundance of detail and complex rules that govern its behavior. The use of a type of software such as ADOBE DREAMWEAVER can help us for many of these rules.

PAGE FORMAT

The HTML page style sheets include information both about the page itself and the elements contained in it. Let me call as 'newstile' this example of CSS.
It can be connected to the web page with the following statement, where newstyle.css is a style sheet code file that resides into a DIR that I've called css. and is made of two following lines:

@charset "utf-8";
/*the character set*/
body { margin: 0px; }
# cornice { padding: 0px; text-align: center; margin: 0 auto; }

The first line says that all the page margin are zero pixels, the second one describes a frame (the div #cornice) that is a container needed to center all the content into the page html <body>.
If you use such instructions linked to in a separate file you have to write in the first line of the html code between the TAGs <HEAD> and this instruction that links the css file to the html page.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/newstyle.css" rel="stylesheet" type="text/css" />

</head>

Or the two instructions can be also written directly between the TAGs <HEAD> and using the following code (in red).This is the code

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style type="text/css">
body { margin: 0px; }
# cornice { padding: 0px; text-align: center; margin: 0 auto; }
</style>

</head

In this case you've put the style instructions between the <style type="text/css"> and </style>. tags

LET ME WRITE SOME FEW WORDS ABOUT TABLES and their style sheets

This is a table of 4 columns and 3 rows, which is obtained by writing a code starting from the point where you want the table to be placed

This is the code

Here are the explanations

Feature's name	Value	Explanation
<table .......>		<table ... its general features and values>
width	"90%"	Total width in percent of available space
border	"2"	Border thikness ( pixels )- here we put 2
cellspacing	"2"	Space between cells ( pixels )- here we put 2
cellpadding	"2"	inside cell padding space
align	"center"	aligns the table in the page's center
<tr>		beginning a row
<td>		beginning a column
		White space to keep the height of the row
</td>		ending a column
</tr>		ending a row

You can fixe characteristics of row style by entering a code line by line to change row background, letters font, text color etc.

<tr ....write here .code.. ...>&bnsp</tr>

This can also be after the beginning of each tag wherever it is allowed to be done. For example, the paragraph <p> will be written as

<p....write here .code.. ....> Tag contents </p>

Let's take an example of how to attach some simple style code attributes to a <td> tag, ie a cell.

<td width = "301"><p style = "color: # CC0000; font-size:smaller;"> write contents here </ p> </ td>

or even

<td width = "301" style = "color:: # CC0000; font-size: smaller;">write your contents here</ td >

or even using a class predefined with the name .My_class_name into a styleshee attached to your page

<td width = "301" align="center" class="My_class_name">write your contents here</ td>>

TABLES' FEATURES

In addition to formatting the entire table, perhaps with a given fund or other color, the cell lines can be combined (merged)


	2 existing cells are merged

And here's the code as it changes. Please see yourself, below, as changing the columns code of the second row.

<table width="90%" border="2" cellspacing="2" cellpadding="2" align="center">
<tr>
<td width="24%"> </td>
<td width="24%"> </td>
<td width="25%"> </td>
<td width="27%"> </td>
</tr>
<tr>
<td> </td>
<td colspan="2" align="center"> 2 existing cells are merged</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

In all cases the DREAMWEAVER software helps us by the drop down menu suggesting the allowed feature to be inserted.
Also you can build a table and insert it into a spot on the page, as well as to edit it by inserting and joining rows or columns. This software make it easy everything...