domenica 21 agosto 2011

HTML / CSS – Tables

html table HTML / CSS Tables




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 icon smile HTML / CSS Tables
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 !

table HTML / CSS Tables


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 ! icon biggrin HTML / CSS Tables


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 icon wink HTML / CSS Tables
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 :

table composition HTML / CSS Tables


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











Laura21 yrsEngland
Michelle33 yrsU.S.A
Is that what you call a table? icon surprised HTML / CSS Tables
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 icon wink HTML / CSS Tables


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















NameAgeCountry
Laura21 yrsEngland
Michelle33 yrsU.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 icon smile HTML / CSS Tables

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 icon sad HTML / CSS Tables


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
NameAgeCountry
Laura21 yrsEngland
Michelle33 yrsU.S.A

Now things are a bit clearer ! icon smile HTML / CSS Tables


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 :

three part table HTML / CSS Tables


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 icon wink HTML / CSS Tables


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


Code : HTML










































Passengers on flight 377
NameAgeCountry
NameAgeCountry
Laura21 yrsEngland
Michelle26 yrsU.S.A.
Carmen32 yrsSpain
Francois43 yrsFrance
John29 yrsEngland
Jonathan13 yrsAustralia
Xu19 yrsChina
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 icon wink HTML / CSS Tables
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 :

films HTML / CSS Tables


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 filmFor children ?For teenagers ?
HostelNo, too violentYes
Winnie The PoohYesNot violent enough...
Happy FeetFor 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 icon wink HTML / CSS Tables


Code : HTML
















Title of the filmHostelWinnie The PoohHappy Feet
For children ?No, too violentYesFor the whole family !
For teenagers ?/th>
YesNot violent enough...

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 icon smile HTML / CSS Tables


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 icon smile HTML / CSS Tables


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 icon smile HTML / CSS Tables
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

Si è verificato un errore nel gadget
 
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
NameAgeCountry
NameAgeCountry
Laura21 yrsEngland
Michelle26 yrsU.S.A
Carmen32 yrsSpain
Francois43 yrsFrance
John29 yrsEngland
Jonathan13 yrsAustralia
Xu19 yrsChina

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 icon wink HTML / CSS Tables


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 ?

tables css HTML / CSS Tables


Personally, I know which one I prefer icon biggrin HTML / CSS Tables
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.