HTML Tutorial 103: Design with tables and CSS

HTML - HyperText Markup LanguageYou know how to write a valid XHTML document, however, the page is still not as nice looking as ruelicke.net or google.com or any other website out there.

What I teach you today is not how to create a professional website, but it is the basic design method any web programmer started with.
It is the old school table, but I add Cascading Style Sheets (CSS) to the table to get it a nice look.

But before you can start, you need to have an idea how you want to structure your page. The best thing to do is to grab a piece of paper and make a draft. As example I made a draft in a graphic program, although I prefer the paper method:
Draft for a page

Now let’s think about how to convert the design into HTML…
You remember reading in the W3Schools reference something about <table>? If not, it is no problem as I explain it now 🙂

But first let’s get the basic page code done, which is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hello world!</title>
</head>
<body>

</body>
</html>

Now let’s see how we add the basic structure of the original design by using

Tables

To create a HTML table you need the <table>, <tr> and <td> tag. I will post the code I used for the table of my final example page and then I explain you the additional attributes used to modify the table:

<table>
<tr>
<td colspan="2">
Hello World!
</td>
</tr>
<tr>
<td>
menu
</td>
<td>
text
</td>
<td rowspan="2"$gt;
whatever
</td>
</tr>
<tr>
<td colspan="2">
foot
</td>
</tr>
</table>

Put the whole table code inside the body tags and have a look it it. I know it isn’t looking nice, but we will take care of it later.
So what does the code do…
the <table> tag defines a new table,
the <tr> tag defines a new row in the table. If you count our „<tr>…</tr>“ you will count 3 rows,
the <td> tag defines a new cell/column in a row. Our first row has one cell/column, the second has 3 cells/columns and the third has one cell/column again.

Please keep the following „method“ in mind when you build a table. It served me good back when I used tables for layouts:
1. define the table: <table></table>
2. count how many rows you need and add them inside the <table> tags: <tr></tr><tr></tr>…
3. have a look at the first row and count how many cells/columns you need. Then insert the amount of cells you need by adding the appropriate code into the <tr></tr> tags: <td>…</td><td>…</td>

If you used the above method you will see that our table doesn’t work as intended if we use my draft. So here we are using those attributes I have in my sample code already:
rowspan tells the browser if a cell is stretched over multiple rows. In my example the third cell of the second row stretches over 3 rows, so we are using rowspan=“3″
colspan tells the browser if a cell is stretched over multiple cells/columns. The cells of the first and the third row in our example are stretched over 2 cells/columns, meaning that the cells of the first and third row are as long as the 2 cells of the second row. We use colspan=“2″ here to achieve the proper behavior.
I assume it is difficult to visualize, so let me try to explain it in a different way:
rowspan stretches a cell vertical while the colspan stretches a cell horizontal.

Now as our table is behaving the way we want it to, it is time to add some optical

design with CSS

For a full list of CSS properties visit the w3schools website

Let me show you the code of the final result of my example, using what we have learned and updated with the CSS I want to teach you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Hello World
</title>
</head>

<body style="background:#333333;color:#FFFFFF;">

<table style="background:#222222;border:1px solid #555555;width:100%;">
<tr>
<td style="background:#999999;border:1px solid #555555;font-size:50px;font-weight:700;width:auto" colspan="2">
Hello World!
</td>
</tr>
<tr>
<td style="background:#990000;border:1px solid #555555;font-size:12px;font-weight:700;text-align:right;vertical-align:top;width:180px;">
<a href="http://www.ruelicke.net/2007/04/html-tutorial-101-basics/" style="color:#00FFFF;">HTML Tutorial 101:<br />Basics</a>
<br /><br />
<a href="http://www.ruelicke.net/2007/04/html-tutorial-102-tags-validation/" style="color:#FFFF00;text-decoration:overline;">HTML Tutorial 102:<br />Tags and Validation</a>
<br /><br />
<a href="#">HTML 103</a>
<br />
</td>
<td style="background:#009900;border:1px solid #555555;text-align:left;vertical-align:top;width:auto;">
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
<br />
This is my first website.
</td>
<td rowspan="2" style="width:50px;">
right tab, covering all 3 rows
</td>
</tr>
<tr>
<td style="background:#999999;border:1px solid #555555;font-size:6px;font-weight:700;text-align:center;width:auto" colspan="2">
Goodbye World!
</td>
</tr>

</table>

</body>
</html>

I know the code is a mess on here, so I recommend you copy and paste it into a text editor to have a proper look at it 🙂

Let’s start with the body tag. You see the attribute „style“ which tells the browser that inside this attribute you are using CSS to modify how the page is displayed.

background let you change the background color of the overall website. You need to use hexadecimal colors although there are also named colors, like yellow or black. I recommend you use Google to find more informations about hexadecimal colors.
color let you change the font color of the overall website. The same as for the background color applies.

I also added the style attribute to the table tag as I wanted to change the style of the table. I also wanted to make the table stretch over the whole width of the browser window.

border let you create a border around the table. I decided to use a solid 1px width border and gave it a grey color. There are some more border styles, so visit the CSS reference 🙂
width let you define how broad the table is. In my case I used 100% which means that the table fills the whole browser window. Alternately you can use pixel to give a fixed size, like 800px or what you like.

To manipulate the style inside or of a cell itself, you again add the style attribute. Basically you can add the style attribute to any tag, except the closing tag of a tag of course.
So, what did I do to my cells:

the cell of the first row got a
font-size of 50px, which means that the size of the displayed font is 50px.
The font-weight of 700 displays the text as bold.

the text in the first cell of the second row got
aligned to the right with the proprietary: text-align. Additional to „right“ you can use „center“ and „left“.
vertical-align:top; aligns the whole text in the cell to the top of the cell as our second cell, the one with the in it, is a lot longer. Wouldn’t we set it to the top, it would be vertical aligned in the middle, as it happens in the third cell. There are a few more vertical align behaviors, have a look at them and play around 🙂
I also changed the color of the links in the cell and used text-decoration to show you that you can change a lot more with the right style proprietaries.

The other cells and rows got style proprietaries I explained earlier. I just used different colors to show you how the table layout looks like, so you can compare what the attributes are doing with a cell or row or the table…

I hope you understood everything, so have a look at my example page.
If you are not able to get your page working the way you want, feel free to use the comment section to ask for help.

Right now I have no idea what I will do in the next tutorial, so it will be a surprise. Meanwhile, use and train what you have learned. 🙂

Schreibe einen Kommentar