Tables in HTML
Posted The: 17/03/2008 At: 18:04
Last Edited: 30/04/2009 At: 3:45
Contents:
Back in the old days, we used tables to "force" a paticuler rendering of our page'(s), due to the lack of better ways to layout a page. Tables have however been replaced by css based layouts, which is much easier to create and maintain.
Table Tags
The Tags used when creating Tables, consists of:
| <tr> | For Table Rows |
| <td> | For Table Cells |
The above was to be considred tabuler data, and as such i used a table to display it. An example of such, can be seen below:
<table style="border:1px solid black;"> <tr> <td>Table-Row 1 - Cell 1</td> <td>Table-Row 1 - Cell 2</td> </tr> <tr> <td>Table-Row 2 - Cell 1</td> <td>Table-Row 2 - Cell 2</td> </tr> </table>
Note. Again you can use "border:0" to remove the border. Tables are block level elements, and doesn't need to be inclosed in other tags. Remember that Content goes between the body tags.
Styling tables using CSS
Can be done using the border-collapse and border-spacing properties. I listed the old attributes in case, you find the need to use the them, you are however encouraged to use the CSS equivalents.
- cellspacing equal to using border-spacing and border-collapse
- cellpadding equal to using padding
An example of using css to style a table can be seen below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Creating Tables</title>
<style type="text/css">
table, td {
border:1px solid blue;
border-collapse: collapse;
border-spacing: 0;
}
</style>
</head>
<body>
<h1>Creating Tables</h1>
<table>
<tr>
<td>Table-Row 1 - Cell 1</td>
<td>Table-Row 1 - Cell 2</td>
</tr>
<tr>
<td>Table-Row 2 - Cell 1</td>
<td>Table-Row 2 - Cell 2</td>
</tr>
</table>
</body>
</html>The next Tutorial is: Using SPAN and DIV for Layout
Comments: [0]
