Tables in HTML
Posted The: 17/03/2008 At: 18:04
Last Edited: 23/08/2010 At: 10:46
Contents:
Tables are used for tabular data, but it has also also been used for layout, mostly in lack of better alternatives.
Note. Using Tables for layout purposes is discouraged, consider using CSS instead.
Table Tags
The Tags used when creating Tables, consists of:
| The table Tag | The table tags <table> </table> are used to create a table element. |
| The tr Tag | The tr tags <tr> </tr> are used inside a table, to create table rows |
| The td Tag | The td tags <td> </td> are used inside a table, to create 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]
