Tables

Talk about HTML resources, styles etc.
Post Reply
User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Tables

Post by JimBb » Sun Mar 06, 2005 1:54 pm

Just like with forms, tables do not consist of just one HTML tag, they are a combination of tags. Since there is a lot to say about tables I'll split this thread in chewable chunks. So, today the Basics.

To build a table, you need at least three tags:

Code: Select all

<table>
  <tr>
    <td>
    </td>
  </tr>
</table
What this will do is create a table with one row, one column, and no data in it. Notice the indented structure: that is not obliged. However, it's a good practice: as tables can become quite complex, using indents enables you to see easily which bit does what exactly.

So where does the visible information come? In between the <td> and </td> tags. Nowhere else. This is very important, your table will look like rubbish if you put anything inside the <table></table> tag, and outside the <td></td> tags.

Code: Select all

<table>
  <tr>
    <td>
      Here I can put text, images, scripts, whatever.
    </td>
  </tr>
</table
Just for the record: the following will have exactly the same result:

Code: Select all

<table>
  <tr>
    <td>Here I can put text, images, scripts, whatever.</td>
  </tr>
</table
I prefer the first method though, as it shows much better which closing tag belongs to which opening tag when the content of the table-cells becomes bigger or more complex.

So what do the different tags mean?
table defines, you guessed it, the tabe. Later we'll see that the tag has some arguments that alow you to tweak the behavior of the table.
tr means Table Row. Which means of course that if you repeat them, you'll have multiple rows :)
td stands for Table Data, or if you compare it to a spreadsheet: a cell.

So, a table with 2 rows of 3 cells looks like this:

Code: Select all

<table>
  <tr>
    <td>
      First row, first cell...
    </td>
    <td>
      ...second cell...
    </td>
    <td>
      ...and the last cell of the first row.
    </td>
  </tr>
  <tr>
    <td>
      Second row, first cell...
    </td>
    <td>
      ...middle cell...
    </td>
    <td>
      ...and the last one, in the lower right.
    </td>
  </tr>
</table
Let's resume...
Everything between <table> and </table> defines how the table looks like and what comes in it.
Everything between <tr> and </tr> is what is in one row of the table.
Everything between <td> and </td> makes up one table-cell on one row.

An that's enough to start with.

Jim

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Tue Mar 08, 2005 5:15 pm

Yes, but I don't want a spreadsheet-style of table, I do want some boxes but not nicely aligned in rows and columns.
Okay, feasible. Not easy to show in this forum though as HTML cannot be used. So to overcome fontsize-issues and so, I'll be using something like this to show what the outcome of a particular set of code would look like:

xxxxxxx
x
xxxxxx
xxxxxxx

That would be a table with two cells. 'kay?

Right, step one. What if you want to have a big title, like a banner or so, above two columns of text and images? Answer: with a table :) And that would be something like this:

Code: Select all

<table>
  <tr>
    <td colspan="2">
       Here comes your title, or your banner image
    </td>
  </tr>
  <tr>
    <td>
      This is the left column
    </td>
    <td>
      This is the right column
    </td>
  </tr>
</table
Easy, isn't it? That would be somewhat like the following:


xxxxxxx
x
xxxxxx
xxxxxxx
x
xxxxxx
xxxxxxx


So what this does is not hide the line between the top two cells, it merges those cells. It does exactly as it says: it spans 2 columns (colspan="2").

Of course you can do the same vertically:

Code: Select all

<table>
  <tr>
    <td rowspan="2">
       This is the left cell, along the whole height of the table
    </td>
    <td>
      This is the top cell at the right
    </td>
  </tr>
  <tr>
    <td>
      This is the bottom cell on the right
    </td>
  </tr>
</table
On first sight this looks a little confusing I reckon, so let's draw the result first before explaining.

xxxxxxx
x
xxxxxx
x
xxxxxx
x
xxxxxx
xxxxxxx


When you start defining a table, start at the upper left. So the first thing you do is start a new row (<TR>, remember?), and in there the first cell at the upper left. As you see in the "drawing" that's the red block. That one should span 2 rows, hence 'rowspan="2"'.
Next, you're still on the same row, the second cell. That's the top orange one. Nothing special, just a <td> there.
Then you start at the second row. But the first cell of that is "taken" by an expanded cell from the first row, so you don't define that. So all you do there is define the second cell, and again that's an ordinary cell (the green one).

Let's take that code again, and add the colors the table is made of, just to make it more visual:
<tr>
<td rowspan="2">
This is the left cell, along the whole height of the table
</td>
<td>
This is the top cell at the right
</td>
</tr>
<tr>
<td>
This is the bottom cell on the right
</td>

</tr>

Makes sense?

Jim
Last edited by JimBb on Mon Jul 10, 2006 2:31 am, edited 1 time in total.

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Thu Mar 10, 2005 4:31 pm

You'd be surprised how often tables are used - and not as tables... 8) Quite often they are a handy design element, but then of course you just don't want them to look like tables, right? If you want to make sure that pictures and text are horizontally or verticaly aligned, then the only HTML tool to make sure this happens in every possible resolution is often a table.

Well then, let's hide the table, and let's play a little with the general behaviour of the table.

Code: Select all

<table border="0">
  <tr>
    <td>
      Here is your first cell
    </td>
  </tr>
</table>
Since we're concentrating on "general behaviour of the table", that means we'll be adding some arguments to the <table> tag itself.
border="x" defines the line around the table, and the lines around every table cell. "0" means: no border. "10" means: a 10 pixel border. around everything. What is good and what is bad? You decide, it's your design.

Code: Select all

<table border="0" cellspacing="3">
  <tr>
    <td>
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
cellspacing="y" tells the table to leave "y" pixels between individual table-cells, or between the cells ant the table edge. Combined with 'border="1"' this has the effect of a double line around all cells.

Code: Select all

<table border="0" cellspacing="3" cellpadding="5">
  <tr>
    <td>
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
cellpadding="z", often confused with cellspacing, tells your table how much space there should be between the cell and its content. An inner margin at all four sides, if you like.
So cellspacing is between cells and cells and the table edge, cellpadding is between a cell and its content. The example shows a table with one cell, 3 pixels between each cell and between cells and the table's border, and 5 pixels of white space around everything inside each cell.
Cellpadding is a nice way of not making it look as if everything is "glued" against each other.

So, is that all? No it isn't. The fun is only beginning :)

Code: Select all

<table border="0" cellspacing="3" cellpadding="5" width="80%">
  <tr>
    <td>
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
width=value indicates the width of the entire table. Sounds simple, but it isn't really.
You noticed I gave a percentage: the example indicates that I want my table to be as wide as 80% of the available space. If you have one table that's easy: 80% of the browser window. A great way to make a site resolution-independant.
But... If you have something that cannot resize inside a table cell (like a big picture), your table will not behave as you want to, in stead it will always show that unresizable thing. Imagine you say the width should be 50%, and you have a picture of 1024x2 pixels (like a horizontal line), in a 1024x768 browser window your table will not be 50%=512 pixels wide, but 1024 (from the picture) or more (from other cells or borders or so). Careful with that.
But 2... You can put a table inside a table (inside a table inside a... and so on). In that case 50% means 50% of the width of the table you put your table in. Suppose the outer table is 500 pixels wide, then the inner table, at 50%, will be 250 pixels, regardless of the screen width.

By the way, the example shows "80%" - of course you can fix the width, by using just a number. 'width="550"' means that the table is 550 pixels wide. If it doesn't have anything bigger inside :?

Tired already? There's more ;) But this is a bit easier :)

Code: Select all

<table border="0" cellspacing="3" cellpadding="5" width="80%" align="right">
  <tr>
    <td>
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
align="left|right|center" just means: where do you want your table to be. You should compare this to the same argument for a picture (<img=...>). Align="left" means that the table will be stuck to the left margin, and that if there is other text, it will "flow" around it to the right.

Jim

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Sun Mar 13, 2005 4:22 pm

And if you do use your table to look like a table, you might want to have nice headers above the columns as well. Guess what: there's a tag for it :)

Code: Select all

<table border="0">
  <tr>
    <th>
      Column Header
    </th>
  </tr>
  <tr>
    <td>
      Here is your first cell
    </td>
  </tr>
</table>
Well, that explained about all there is to explain: there is a tag called <th> which means Table Header. And it uses all the arguments <td> uses. Easy, isn't it?

Why would you use <th>? Well, because it presents the text inside that tag as bold and centered. In other words: it saves you some code :)

Jim

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Tue Mar 15, 2005 3:24 pm

Okay, now let's have a wee look at the things you can do with one single cell. Which is more than you think..

Code: Select all

<table border="0">
  <tr>
    <td width="225">
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
We know what this code means now: it's a one-row, two column table. If you've tried the code in previous posts you noticed that the table adjusted itself to the contents of each cell of the table, the only way to make the table larger was by using 'width="xyz"' in the <table> tag.

The example shows that the first cell will be minimum 225 pixels wide. If a larger picture is in the cell, the width will be accordingly. And the other one? It just takes the space it takes. So if you have a lot of text there, the table will always be as wide as the browser, sometimes with long lines of text, sometimes with short lines depending on the size of the browser window.
In stead of 'width="225"' you could just as well use 'width="25%"'. That will show the cell at always 25% of the width of the table. The other cell will again take the space it needs.

Code: Select all

<table border="0">
  <tr>
    <td width="225">
      Here is your first cell
    </td>
    <td height="35">
      Here is your second cell
    </td>
  </tr>
</table>
Of course, if the code allows you to define the width, it would make sense to allow the height as well :) Since both cells are on the same row the entire row is affected by this one cell.

Next, alignment...

Code: Select all

<table border="0">
  <tr>
    <td width="225" align="right">
      Here is your first cell
    </td>
    <td height="35">
      Here is your second cell
    </td>
  </tr>
</table>
By default the horizontal alignment of a table cell is "left". But as you can see other alignments are possible: "left", "right", or "center"

And if there is horizontal alignment, then most likely...

Code: Select all

<table border="0">
  <tr>
    <td width="225" align="right">
      Here is your first cell
    </td>
    <td height="35" valign="bottom">
      Here is your second cell
    </td>
  </tr>
</table>
If you force the height of a cell, or if a cell with a lot of contents enlarges every cell in a row, you may want to avoid that the default, "top" is used. Well, "top", "bottom" or "middle" are possible. Those are easy to understand. There's also "baseline": this means that the contents of all cells should line up with the same baseline.

One more thing then: you've noticed that cells adapt to the contents. Which means that depending on what is in other cells it could be so that some text is wrapped while you don't want that.

Code: Select all

<table border="0">
  <tr>
    <td width="225" align="right">
      Here is your first cell
    </td>
    <td height="35" valign="bottom" nowrap>
      Here is your second cell
    </td>
  </tr>
</table>
The 'nowrap' argument prevents wrapping. One exception: if you forced the table cells to be a certain size and your phrase doesn't fit in there, wrapping will occur.

So, let's recap...:
Width sets the width, in pixels or a percentage
Height sets the height, in pixels or a percentage
Align sets the horizontal alignment (left, right, center)
Valign sets the vertical alignment left, right, middle, baseline)
Nowrap prevents wrapping.

Oh, and by the way: everything here doesn't only apply to the <td> tag, but also to the <th> and even the <tr> tag. Which means you just learned 5x3=15 different arguments :D

Jim

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Mon Mar 21, 2005 5:02 pm

Colors! Ah jeez, I haven't said anything about colors yet! Let's fix that her and now!

Code: Select all

<table border="3" bordercolor="#FF1111">
  <tr>
    <td width="225">
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
I guess you can imagine that bordercolor="color" gives you a colored border around your table. I guess you also know that you can use two ways of indicating a color: by name ("red", "blue", black",...), or by hexadecimal number, of hex number, or hex code, like in the example (which will be a reddish color).
What I guess many of you didn't know is that Internet Explorer and Mozilla/Firefox produce a different result.
Based on the example, ...:
Internet Explorer will put a 3 pixel green reddish line around the table, and a 1 pixel redish line around every cell.
Mozilla and Firefox will put a 3 pixel 3D-stule reddish border arund the table, and not color the individual table cells.
(If anyone has info about how other browsers react I'd love to hear about it)

Okay, next step...:

Code: Select all

<table border="3" bordercolor="#FF1111">
  <tr>
    <td width="225" bgcolor="red">
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
bgcolor="color" is, as you can see, used for individual cells, not for the entire table. Guess what: this will set the backgroundcolor for this particular cell to red. And of course in stead of the word "red" I could have used it's hex value as well ("#ff0000") - or any other hex value of course.

While on the subject of backgrounds...:

Code: Select all

<table border="3" bordercolor="#FF1111" background="../images/roses.jpg">
  <tr>
    <td width="225" bgcolor="red">
      Here is your first cell
    </td>
    <td>
      Here is your second cell
    </td>
  </tr>
</table>
background="URL of picture" shows, as you guessed, a background. Since it is in the table tag it is for the entire table, it cannot be used for individual cells.
Mind you: it really is a background. In the example the read background-color for the first cell will be on top of that background-picture.

Just a word of warning: I read somewhere (though haven't experienced it with modern browsers) that the background argument may have different results in different browsers.

Jim

User avatar
JimBb
Deep Thought
Posts: 1964
Joined: Sun Nov 16, 2003 8:19 pm
Location: Dilbeek, Belgium
Contact:

Post by JimBb » Sun Apr 03, 2005 3:53 pm

Time for a little trick.
Suppose you have the following:

Code: Select all

<table>
  <tr>
    <td>
      First row, first cell...
    </td>
    <td>
      ...second cell...
    </td>
    <td>
      ...and the last cell of the first row.
    </td>
  </tr>
</table>
Nothing special about that. It's a one-row, three-cell table.
But what if you want to fix the width of each of the cells for example? Well, as we've seen earlier, you should do something like <td width="x"> for each of the cells. And for a table this size that's not too much work, but what if you have lots of cells?

Then try the following:

Code: Select all

<table>
  <colgroup span="3" width="150">
  </colgroup>
  <tr>
    <td>
      First row, first cell...
    </td>
    <td>
      ...second cell...
    </td>
    <td>
      ...and the last cell of the first row.
    </td>
  </tr>
</table>
This neat little trick sets the width for each cell, all in one go. Cool, eh? Notice by the way that the Colgroup-tag is put between <table> and <tr>, it should be nowhere else.

But what if I don't want every cell to be just as wide? What if I want the first one to be narrower for example? Well, then use the following code:

Code: Select all

<table>
  <colgroup span="3" width="400">
    <col span="1" width="100">
    <col span="2" width="150">
  </colgroup>
  <tr>
    <td>
      First row, first cell...
    </td>
    <td>
      ...second cell...
    </td>
    <td>
      ...and the last cell of the first row.
    </td>
  </tr>
</table>
This says...:
colgroup span="3" width="400": This colgroup tag defines "3" columns, and the total width is "400" pixels. (So that refers to the total width of all individual columns together)
col span="1" width="100": The first 1 columns is "100" pixels wide.
col span="2" width="150": The next 2 columns are each "150" pixels wide.
So <col span="x"...> doesn't mean the first or the third or so, but a block of x columns. Just to make things clear: in the following example the last column is narrower than the first two:

Code: Select all

<table>
  <colgroup span="3" width="400">
    <col span="2" width="150">
    <col span="1" width="100">
  </colgroup>
  <tr>
    <td>
      First row, first cell...
    </td>
    <td>
      ...second cell...
    </td>
    <td>
      ...and the last cell of the first row.
    </td>
  </tr>
</table>
So the first "col" defines the first 2, the second "col" defines the last 1.

Jim

Post Reply