How to format tables into an html page

Recalls about stylesheets - Table styles - Examples -TIPS

FORMATTING TABLES
di 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. .

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 ADOBE DREAMWEAVER can help us for many of these rules.

RECALLS ABOUT STYLESHEETS

The HTML page style sheets include information both for the page itself and for the elements that are contained in it. They can be connected to the web page with the following statement, which links a hypothetical file named stilenuovo.css that is the style sheet file that resides in DIR css.

Here's the code that must be written between <head>...... </head> tags

In the first row of this file one must write the character set

@charset "utf-8"

The style instructions may instead be written directly between the TAG <head>.... with the following code

One page can have multiple style sheets, but it is better to put everything in one linked CSS file or between <head>...... </head> tags.

A style sheet can be linked to any html page of a site, and of course it only applies to the items that are inserted into the body of the page, between the tag <body> ..... . The CSS file however, must contain all the possible different elements associated with all pages.

For example, if we have a table on a page, the linked style sheet may very well contain the formatting.

LET'S GIVE THE STYLE TO A TABLE IN GENERAL

Add a table style to a previous CSS telling us that the page has no margin. and that the page contains a frame called #cornice to center the elements in it.

# cornice {
padding: 0px; text-align: center; margin: 0 auto;

}

table {
table-layout: fixed;
width: 700px; border: 4px solid black;
border-collapse: separate;
border-spacing: 5px;
background: Silver;
caption-side : top;
}

tr {background-color:#99FF00;}

td { background-color: #0099FF;
border-color: 1px solid #fff;}

th {
background-color: #ddd;
border: 1px solid #fff;
color: red;
}

</style>

Remark: with this code all the tables will be formatted the same way. To have different formats for different pages in a page one must adopt different names for each table to be formatted.

TIPS

If you need you can instead give to each element of your page his own separate style. You can do this in two different ways. Let's consider a table of 3 rows and two columns like that

Which related code is

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Write on the line you want to cahnge the style of each element . Example: give a different background color to each cell of the first row

FIRST WAY

You can do it for each tag of your table

WAY TWO

Write a separate css file to link pages where wou can give different styles by classes and write like this :

<style type="text/css">

/** first row*/

.col1-row1 { background-color:#BC0B0E; }
.col2-row1 { background-color:beige;}
.col3-row1 { background-color:antiquewhite; ]

</style>

You can assign eack class to the tag <th></th> as in this example

<th class="col1-row1"> here put text or images < /th>

Note Classes may be used to characterize every TAG as <p></p> or <div></div> AND OTHERS Must pay attention that not all CSS commands work for all TAGS so you should test page results in your browser after introducing each new command. Around in the web you can find pages with a very lot of classes because built by automatic pre-made software Go around into the websites and seeby your browser tools the css styles linked. You can learn much.and copy something.

WILL CONTINUE soon as I can ...

...