| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
All chapters... Table of contentsIntroduction A simple HTML document Images Lists Links Tables Frames Forms Cascading style sheets JavaScript Programming in PHP Server side includes CGI & Perl Extended characters Examples of colours Learn more Software Recent changes Alphabetical index In this chapter...
Table basicsCellpadding: space around the contents of cells Cellspacing: space between cells The border around tables Width of a table THEAD, TBODY and TFOOD elements Table header cell Aligning the contents of cells Cells that span more than column or row Table captions Text wrapping in a cell Using a table to put text in columns
Taalkeuze...
U hebt gekozen om Engels als eerste taal te gebruiken. |
TablesTables are an effective and easy way of ordering information. HTML offers plenty of possibilities. Table basicsThis is the most elementary example of a table:
<TABLE SUMMARY="an overview of what is here" BORDER="4" CELLPADDING="5" CELLSPACING="5" WIDTH="200">
<TABLE> and </TABLE> indicate that the data in between them forms a table. The attributes WIDTH, CELLPADDING, CELLSPACING and BORDER are explained below. The SUMMARY attribute is used to give an overview of the table's purpose and contents for use by braille or speech synthesizers. <TR> and </TR> enclose the data for one row in a table. The total number of rows is defined by the number of <TR> tags you use. <TD> and </TD> enclose the data for one cell. The total number of cells in a row defines the number of columns in the table. In principle you can omit the closing tags for rows and cells as they are implied by other tags. In this example there is only plain text in each cell. You can also put in images or links, or even another table. Most browsers will automatically adept the size of the table and the width of the columns to the contents of each cell, as in this example. If you define different number of columns in different rows, the browser will try to make sense out of it but the result may not be very nice. Cellpadding: space around the contents of cellsThe CELLPADDING attribute sets how much space is put around the contents of a cell: <TABLE BORDER="2" CELLPADDING="2">
<TABLE BORDER="2" CELLPADDING="20">
As you can see, the CELLPADDING attribute controls the space put between the contents of a cell and its borders. The default for the padding is zero. Unless you give it an higher value, the borders of the cells will be drawn directly around the contents. Cellspacing: space between cellsThe CELLSPACING attribute sets how much space is put between the cells. These two examples should be fairly self-explanatory: <TABLE BORDER="2" CELLSPACING="20">
<TABLE BORDER="2" CELLSPACING="2">
The border around tablesThe BORDER attribute control the border drawn around tables. If you leave out the BORDER attribute, the table and cells will have no border around them: <TABLE>
You can set the BORDER attribuut to any value as long as it is an integer: <TABLE BORDER="24">
Width of a tableUsing the WIDTH attribute you can set the width of a table. <TABLE WIDTH="400" BORDER="1">
The value for WIDTH can either be an integer for width in pixels or a percentage for width relative to the surrounding element: <TABLE WIDTH="50%" BORDER="1">
As you can see, the table above gets a width of 50% of the surrounding box. THEAD, TBODY and TFOOD elementsYou can divide a table into header, footer and body by using the THEAD, TBODY and TFOOD elements. <TABLE>
The header is always printed at the top, the footer is always printed at the bottom of the table. With longer tables the browser repeats the header at the top of every page and the footer at the bottom of every page. Some browsers also put extra space between the header, body and footer. Table header cellThe TH element can be used to define a table header cell: <TABLE WIDTH="50%" BORDER="1">
Browsers will display TH distinct from TD. How exactly, depends on the browser. You can use the TH element in combination with the THEAD element. <TABLE WIDTH="50%" BORDER="1">
The THEAD element always has to come before the TBODY element. Aligning the contents of cellsThe ALIGN and VALIGN attributes can be used in a TR, TD and TH elements as well as with the TBODY, THEAD and TFOOT elements. This depends if you want to define the alignments per cell, per row or for a whole part of the table. ALIGN controls the horizontal alignment. Possible values are "left", "center", "right", "justify" or "char". VALIGN controls vertical alignment. Possible values are "top", "middle", "bottom" or "baseline". Here is an example of the use of VALIGN: <TABLE BORDER="1">
The defaults are "left" for ALIGN and "middle" for VALIGN. Normally, you would not use these values with one exception. If you set either two for a whole row, by including this attribute in the <TR> tag, you can overrule it for one cell by using the same attribute in a <TD> tag. In the following example VALIGN is set to "top" for the whole row, with the third cell as an exception: <TABLE BORDER="3">
The ALIGN attribute can be used in a very similar manner: <TABLE WIDTH="80%" BORDER="5">
"Justify" works well only with longer texts, when the left and right margins can be aligned: <TABLE WIDTH="80%" BORDER="4" CELLSPACING="0" CELLPADDING="5">
Also look at the use of CELLSPACING and CELLPADDING in this example. By setting the spacing to zero, the white space between the border and the content of the cell disappears. Cells that span more than column or rowThe COLSPAN attribute tells the browser that a cell should span more than one column. The ROWSPAN attribute does the same for rows: <TABLE BORDER="2">
As you can see, the fourth cell of the first row spans two rows and the first cell of the second row spans two columns. You have to make sure the number of cells, rows and columns fit together or you will get very chaotic results. Table captionsA caption tag can be used to put an explanation above a table: <TABLE BORDER="3">
There can only be one CAPTION element in a table and it needs to be immediately following the TABLE element. The default positioning of the caption is over the table but you can change that using style sheets. Text wrapping in a cellBy default text in a cell is wrapped to fit the table within the margins of the screen (or the window, to be precise) and to fit the cells within the table: <TABLE BORDER="2">
Using a table to put text in columnsYou can use a table to put text in multiple columns: <TABLE WIDTH="80%">
As you can see, the first <TD> tag has a STYLE="width:50%;" attribute. This is because normally the browser will adjust the size of the cells to the text that you put in it. If you want the columns to have the same width, you either put exactly the same amount of text in it or -which is easier- use the WIDTH attribute to force equal columns. The 50%, by the way, is a percentage of the width of the table, not of the window.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Feedback welcome...
Open standards...
This site conforms completely to open standards of the World Wide Web Consortium (W3C). Click on the logos to verify that.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
©1995-2010 Jan Weijers, the Netherlands. All rights reserved.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||