pc hardware,pc store,new pc,computer hardware,pc software,pc online,computer information,online pc,hardware pc,information computer,about computer hardware,information on computer,computer hardware system,computer system hardware,information on the computer,about the computer hardware,about hardware of computer,computer hardware

No, we still haven’t finished with XHTML (or with CSS either !)

Just to reassure you though : we’ve seen most of it and we’re nearly finished
There are still a few elements to see though. They might not be the most important elements, maybe not the most used either; however I am willing to bet that you’ll need them sooner or later.

Among these elements that I want to show you before we finish (already ?! o_0), are tables.
I want bother drawing one; I suppose everybody knows what a table looks like.

… In fact I will.
Ladies, gentlemen, here is … a table !

Okay, that is quite a simple table. Of course, we’ll learn to make more complicated tables, so that you can do everything you want.
Yet again, we’ll be using CSS to make the tables look nicer. The good news : there is no new CSS to learn, you nearly know everything !

A table is made using XHTML tags. Let’s start by seeing the basic structure …

The first tag to know :

. This is the tag that allows us to indicate the beginning and end of a table.
This tag is a block, so it needs to be placed outside of paragraphs.

Example :

Code : HTML

This is a paragraph before the table

Put the content of the table here

This is a paragraph after the table

Right, and what do we put in the table ?

Now, get ready to receive an avalanche of new tags
To start slowly, here are 2 very important tags :

: indicates the beginning and end of a line in the table : indicates the beginning and end of one cell in the table

In XHTML, a table is made line by line. In each line (), we insert the content of each cell ().
As a diagram, the table I showed earlier looks like this :

We have one line tag () that surrounds each of the cells ().
For example, if I wanted to make a table with 2 lines, and 3 cells par line (3 columns), I would write this :

Code : HTML

Laura	21 yrs	England
Michelle	33 yrs	U.S.A

Is that what you call a table?

All the text follows in a line, and there aren’t even any borders !

Yes, a table without CSS is rather empty. However, adding borders is very easy : you already know the CSS we need to use !

Code : CSS

td { /* all the cells in a table ... */ border: 1px solid black; /* have a border of 1px */}

We still haven’t quite got the effect we wanted. In effect, we only wanted one border between 2 cells, which isn’t the case here.

Luckily, there is a CSS property that is specific to tables : border-collapse, which makes the borders merge into each other.
This property can take 2 values :

collapse : the borders are merged, which is the effect we want.separate : the borders are separated (default value).

Code : CSS

table { border-collapse: collapse; /* the borders will be merged (looks nicer) */}td { border: 1px solid black;}

Further in the chapter, we’ll see more CSS options. We’ll also try to make the tables look a bit prettier; I admit that they’re ugly

Now we have what we wanted, we’ll add a header line into the table. In our example, the titles are Name, Age and Country.
The header is created with a like all the other lines, but the cells are a this time instead of !

Code : HTML

Name	Age	Country
Laura	21 yrs	England
Michelle	33 yrs	U.S.A

The header line is easily recognizable for 2 reasons :

the cells are instead of it’s the first line of the table (it’s a bit idiotic, but I had to precise it

As the name of the cells is a bit different for the header, we need to think about updating the CSS to tell it to apply styles on the cells AND the header :

Code : CSS

table { border-collapse: collapse;}td, th { /* put a border on the cells AND the header */ border: 1px solid black;}

As you can see, your browser has put the text of the header in bold. All the browsers generally do that, but if you want you can change it with CSS, change the background colour of the cells, the font, the border etc…

We’ll see more advanced CSS examples on tables a bit later.

Normally, all tables must have a title. The title allows the visitor to quickly find out about the content of the table.
In our example we have a list of people … yes, and ? What does it represent ? Without a title, you see, we are a bit lost

Luckily, there is (what would we do without it ! ^^)
This tag is placed right at the beginning of a table, just before the header. This tag indicates the title of the table :

Code : HTML

Passengers on flight 377
Name	Age	Country
Laura	21 yrs	England
Michelle	33 yrs	U.S.A

Now things are a bit clearer !

We’ve learnt how to make small, simple tables. These small tables are enough in most scenarios, but you might need a more … complicated table.
We will be seeing 2 different methods :

With big tables, it is possible to split them into 3 parts : With some tables, you may need to merge several cells together

Let’s start by the first point, we have a big table, and we want to split it into several parts.

If your table is big enough, you have every interest to split it into several parts. For this there are XHTML tags that allow us to define the 3 zones of the table :

Header (at the top) : is defined with the tags Body (in the centre) : is defined with the tags Footer (at the bottom) : is defined with the tags

What should we put in the footer ? Generally, if it’s a big table, recopy the cells of the header. It allows visitors to see what the information is even when they’re at the bottom of the table.

As a diagram, a table in 3 parts is like this :

The only tricky bit is getting the tags in the correct order :

In the code, first we add the header, then the footer, and finally the body. The browser will show everything in the right place, don’t worry

Here’s the code to write a table in 3 parts :

Code : HTML

Passengers on flight 377
Name	Age	Country
Name	Age	Country
Laura	21 yrs	England
Michelle	26 yrs	U.S.A.
Carmen	32 yrs	Spain
Francois	43 yrs	France
John	29 yrs	England
Jonathan	13 yrs	Australia
Xu	19 yrs	China

You don’t have to use these 3 tags (thead, tfoot, tbody) on a table. In fact, only use them if the table is big enough and they help to organise things

For small tables just use the method we used at the beginning of the chapter.

On some complicated tables, you’ll need to merge several cells together.
An example ? Look, this table lists films and says who they’re for :

With the last film, as you can see, the cells are merged : there’s only one. That’s exactly the effect we need.

To merge cells, we need to add an attribute to the tag. There are 2 types of merging :

Column merging : is what I’ve done in the example. We use the attribute colspanLine merging : here, two lines will be merged. The merging is vertical. The attribute is rowspan

As you know, we need to give a value to the attribute (whether it’s colspan or rowspan).
The value is the number of cells you want to merge. In the example I merged 2 cells. One in the column for children ? and one in the column for teenagers ? So we need to write :

Which means : this cell is 2 cells merged together.
It is possible to merge more than that together (3, 4, 5 … as many as you want).

Here’s the XHTML code to make the example from earlier :

Code : HTML

Title of the film	For children ?	For teenagers ?
Hostel	No, too violent	Yes
Winnie The Pooh	Yes	Not violent enough...
Happy Feet	For the whole family !

I haven’t coloured the text to avoid complicating the XHTML code. However you’re good enough to do it yourselves now, you just need to add class

And how do we use rowspan ?

That complicates thing a bit. For our example we will inverse the order of the table : instead of putting the films to the left, we’ll put them at the top.

So if we do that, the colspan is no longer of any use, so we’ll need a rowspan.
Take the time to read and understand this example properly, it’s worth it

Code : HTML

Title of the film	Hostel	Winnie The Pooh	Happy Feet
For children ?	No, too violent	Yes	For the whole family !
For teenagers ?/th>	Yes	Not violent enough...	For the whole family !

Don’t get everything mixed up ! If this example is confusing you, just forget it for the moment, it’s not vital.
You can always come back to it later, when you’re more used to manipulating tables. There’s no shame in leaving an example until later

Right, there still isn’t a lot of design in our tables. As promised, we will see in the last part of this chapter how to make our tables look nicer

The good news : you already know most of the CSS properties needed for tables. A few examples :

to change the borders of cells we use borderto change the colour of a cell, we use background-colorto change the image of a cell, we use background-imageWe can also change the size (font-size), and the font (font-family) of the text in cellsWe can change the width of a table (width), and centre it (margin-auto because it’s a block)We can centre the text in the cells (text-align: center), change the inner margins of cells (padding) etc…

So, you already know most of the CSS properties
The main thing is to think of using them, and use them on the correct tags. For example, if you add a black background colour to the

tag, the whole table will be black. However if you put the background colour on the

Nessun commento:

Posta un commento

tags, only the header cells will be black.

Do you remember the table in 3 parts we saw earlier ? Let’s see the code again :

Code : HTML

Passengers on flight 377
Name	Age	Country
Name	Age	Country
Laura	21 yrs	England
Michelle	26 yrs	U.S.A
Carmen	32 yrs	Spain
Francois	43 yrs	France
John	29 yrs	England
Jonathan	13 yrs	Australia
Xu	19 yrs	China

And, using only the CSS properties we already know, we’ll make the table look a lot better :

Code : CSS

caption { /* the title of the table */ margin: auto; /* align the table's title in the centre */ font-family: Arial, Times, "Times New Roman", serif; font-weight: bold; font-size: 1.2em; color: #009900; margin-bottom: 20px; /* to stop the title from being too close to the table */}table { /* the table itself */ margin: auto; /* centre the table */ border: 4px outset green; /* green border with 3D effect (outset) */ border-collapse: collapse; /* Merge the borders */}th { /* The header cells */ background-color: #006600; color: white; font-size: 1.1em; font-family: Arial, "Arial Black", Times, "Times New Roman", serif;}td { /* The normal cells */ border: 1px solid black; font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif; text-align: center; /* all the text in the cells will be centred */ padding: 5px; /* A small inner margin to stop the text touching the borders */}

You’ve got to admit that it’s not that hard

On table, in particular, you’ve got every interest to work on the CSS. In effect, with and without the CSS, it’s day and night.
You’ve just got to compare. Which one of these tables would you prefer ?

Personally, I know which one I prefer
And if you don’t like my design, don’t hesitate to make your own CSS !

There are a few properties that can only be applied on tables.
Here are the one I suggest you remember :

caption-side : indicates where you want to show the title of the table (doesn’t work before Internet Explorer 8). This property can take the following values : top : the title is at the top (default value)bottom : the title is at the bottomleft : the title is to the leftright : the title is to the rightborder-collapse : we saw this earlier, it allows us to merge borders. This is often used as it gives a very nice effect. It can take the following values : separate : the borders are separated from each other (default value)collapse : the borders are mergedvertical-align : vertical alignment of the content in the cells. This property can take the following values : top : the content is at the top of the cellmiddle : the content is in the middle of the cellbottom : the content is at the bottom of the cell

As we already know border-collapse, I will show you a table that uses vertical-align and caption-side.
I’ll use the same XHTML and CSS files as earlier, but I’ll add the 2 properties we’ve just learnt to the CSS :

Code : CSS

caption { caption-side: bottom; /* The title will be at the bottom of the table. */ margin: auto; font-family: Arial, Times, "Times New Roman", serif; font-weight: bold; font-size: 1.2em; color: #009900; margin-top: 20px; /* the margin needs to be at the top instead of at the bottom now ( the title has moved ) */}table { margin: auto; border: 4px outset green; border-collapse: collapse;}th { background-color: #006600; color: white; font-size: 1.1em; font-family: Arial, "Arial Black", Times, "Times New Roman", serif;}td { height: 80px; /* make the cells higher so that we can see the vertical alignment */ vertical-align: bottom; /* the content will be at the bottom of the cells */ border: 1px solid black; font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif; text-align: center; padding: 5px;}I’ve put comments on the additional lines.

INFORMATION PC ALL THE INFOS YOU NEED TO UNDERSTAND BETTER YOU PC

Pagine

domenica 21 agosto 2011

HTML / CSS – Tables

Nessun commento:

Posta un commento

INFORMATION ON PC

INFORMATION ON PC

Translate This Blog

Archivio blog