Up to this point we have just been working with an ordinary page, and adding styles to it to format the text.

If you reached this page without encountering the last one, investigate this page first.

However tables are an integral part of a good website and we can use Cascading Style Sheets with the tables, to make the formatting easier.

This is the final page that we are making here

The the page we are about to make on the right shows a few of the styles you can use when using CSS in your tables.

The first part of the page is straight from the last lessons, in fact I have tried to keep everything totally consistent and just add new elements in.

In that case you don’t need to begin again from scratch but rename your last file and add the new elements.

If you haven't seen the first page find the lessons on how to make it Here

(note the line at the end of the accounting table is an error from the screenshot)

Writing the page

To create this we will first write the body…..

Cut and paste the code if you like.

This does not include the code that we used in the last lesson. (The large size of it all prohibits it, as well as confusing what we are trying to do.)

So you might want to save a fresh copy of the last page and delete the text and the picture out of the body. Then just add the body here into the space left.

It is expected that you are aware of the HTML for making tables.

Such code includes:

<table> - beginning table

<TH>- table header

- (text bold)

<TR> - table row

<TD> - Table cell

- Heading tags

Note this code may have some "Frontpagism" in it with closing tags missing.

See the raw page here.

It may be easier to copy and paste the code from between <body> and </body> from the raw page (Go: View / Source) into the copy of your last page.

At the end there are a couple of styles

<span style = "float:right">

These handy little styles beat having to have tables to position your bottom text.

These cute little boxes are made using the .box2 style in the style section of this page.

.box2 {
display: block;
background: #E0D090;
}

You could experiment with .box by adding some font styles borders etc as well.

border: 3pt groove #008080;
padding: 1px 1px 1px 1px;
margin: 1pt 1pt 1pt 1pt;

Use /* code you don't want */

To make comments and to take out code you don't need without deleting it.

</style> </head>
<body>

<p>SUCU
<p>Stuff U can Use
<p>For Internet resources and fun
<p>

<a href="http://aboutus.html">About Us </a>

<a href="http://approach.html">Approach </a>

<a href="http://services.html">Services </a>

<a href="http://expertise.html">Expertise</a>

<a href="http://people.html">People </a>

<a href="http://contactus.html">Contacts </a>

<h1>SUCU Expertise</h1>
<p>The following is a sample of our systems experience:</p>
<h2>Accounting</h2>

<table>

<tr> <th>Product</th>
<th>Bank</th> </tr>
<tr>
<td>JD Edwards<td>Prudential Bank</td></tr>
<tr>
<td>Millennium<td>Credit Suisse First Boston</tr>
</table>
<h2>Derivatives</h2>

<table>
<tr> <th>Product</th>
<th>Bank</th> </tr>

<tr><td>Devon<td>Credit Suisse First Boston</td></tr>
<tr><td>Rolfe&Nolan</td><td>Credit Suisse First Boston</td></tr>
</table>

<h2>Eurobond Processing</h2>

<table>
<tr> <th>Product</th>
<th>Bank</th> </tr>
<tr> <td>Cedcom</td><td>Bank of Tokyo</td></tr>
<tr> <td>Euclid</td><td>Banque Indosuez</td></tr>
</table>

<h2>Risk Management</h2>

<table>
<tr> <th>Product</th> <th>Bank</th> </tr>
<tr> <td>Acumen</td><td>Gulf International Bank (& Inv Corp)</td></tr>
<tr> <td>Sophis</td><td>Gulf International Bank (& Inv Corp)</td></tr>
</table>

<h2>Middleware</h2>

<table>
<tr> <th>Product</th> <th>Bank</th> </tr>
<tr> <td>Meridian</td><td>Gulf International Bank</td></tr>
<tr> <td>RCP</td><td>Gulf International Bank (& Inv Corp)</td></tr>
<tr> <td>Talkman</td><td>Gulf International Bank</td></tr>
<tr> <td>GTW</td><td>JP Morgan Chase</td></tr>
<tr> <td>Bloomberg TOMS (P)<td>Gulf International Bank</td></tr>
<tr><td>Ordex</td><td>JP Morgan Chase</td></tr>
</table>

<h2>Markets Knowledge</h2>
We have extensive and detailed knowledge of many financial markets, and have direct in-depth experience with the following products in the stated
regions:

<table>
<tr>
<th rowspan="2">Market</th>
<th colspan="5">Regional Market</th>
<th rowspan="2">Global</th></tr>
<tr> <th>Gulf</th> <th>UK</th> <th>US</th><th>Europe</th>
<th>Japan</th> </tr>
<tr> <td>Bonds</td><td>X</td><td>X</td><td>X</td><td>X</td> <td>X</td><td>X</td></tr>
<tr><td>Equities</td><td> </td><td>X</td><td>X</td>
<td>X</td><td>X</td><td>X</td></tr>
<tr><td>FX</td><td>X</td><td>X</td><td>X</td> <td>X</td><td>X</td><td>X</td></tr>
<tr><td>Money Markets</td><td>X</td> <td>X</td><td>X</td>
<td>X</td><td>X</td><td>X</td></tr>
</table>

<p>

<span style="float:right">

<a href="http://stuffucanuse.com">Contact Us</a></span>
</body></html>

Headings

These are for the 2 headings on the page, both are similar with white text and a blue background.

Note that sub has a margin of 50%, that is setting the blue background to only ½ the page wide.

The 5pt margin sets the left indent of the box, and the 3pt padding sets the distance from the text to the left of the blue box.

It appears that the Table cell constricts the Padding size, so some changes won't be seen.

Don’t forget that the 4 dimensions of margins and padding are Top Right Bottom Left.

Note that by putting the style inside the <H1> and <H2> tags, it will only last for the length of that tag. So you don't need to use the <span> or <div> tags.

.heading {

background: #0033dd;

font-weight: bold;

color: white;

margin: 5pt 0pt 5pt 0pt;

padding: 3pt 0pt 3pt 5pt;}

Add this style here.

<h1 class="heading">SUCU Expertise</h1>

This style formats the subheading styles.

By now things should be getting a little familiar.

Note that the 50% in the margin sets the right margin to 50% of the page width.

Rule of thumb is not to mix the following:

points - pt, (such as 10pt arial)
pixels - px, (such as screen width being 800 pixels wide)
and percentage - %. (percent of the page)

But do what you have to to get your style to work.

.sub {

background: #0033dd;

color: white;

font-size: 95%;

font-weight: bold;

margin: 5pt 50% 5pt 5pt;

padding: 3pt 0pt 2pt 5pt;

}

Add the styles to here

<h2 class="sub">Accounting</h2>

<h2 class="sub">Derivatives</h2>
<h2 class="sub">Eurobond Processing</h2>

<h2 class="sub">Risk Management</h2>
<h2 class="sub">Middleware</h2>

Setting Table styles

These set the style for the table, changing the defaults for the Table, the Row and the Cell

This will automatically apply to any table that you make.

table {

margin-left: 2em;

}

For finer tuning of the table a class .table. was created to set specific feature.

These could have been included in the table style above if you wanted every table to be the same.

I felt that I would rather have the option to set tables individually. So creating my own classes like this gave the freedom to improvise.

.table {

border: solid 2px #557cff;

border-collapse:collapse;

width: 70%;

}

Add this code to all the table tags <table> on your page. This allows the finer tuning, in the .table style to be used.

Add the Table Header <TH> and the Table Data <TD> formatting. This will affect al tables headers and table data fields.

th {

border: solid 2px #557cff; border-collapse:collapse;

}

td {

font-size: 90%;; text-align: left;

}

Formatting the Text in the TH cells

Using the Product class from above I added a blue background and changed the name to .box

This gives me a subtly different class to use.

This also shows how beneficial the class is at setting background colors in cells.

Note that the TH code (table header) in the html also plays a part in the styling of the cell.

The text size is 80% of the full size.

.box {

background: #aabdff;

color: green;

font-size: 80%;

}

<th class="box">Product</th>
<th class="box">Bank</th>

Formatting the X'es

This sets those little X's in the last table so they are aligned in the middle of the cell, and are 90% of the font size.

Ad this code to every <TD> with an X in it.

By now you should be cutting and pasting the new

<td class="x"> over the old <TD> instead of typing.

.x {

font-size: 90%;;

text-align: center;

}

Setting the bottom style

This last style shows some interesting toys.

The big question is "Why have a sub style

<span style="float: left;"> on the page instead of in the div.bottomstyle?

Float sets where on the page, left, right, or center, that the text goes. This is like the align style in HTML.

That we want some text to be left and some to be right necessitates making the style around each part individually.

div.bottomstyle {

font-variant: normal;

font-size: 90%;

margin: 0px;

padding: 5px 1em;

}

Add the style to the bottom text as shown below.