Tables in HTML

How to create Tables in HTML, and style them using CSS.

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>
<html lang="en-US">

  <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>

Brugbart Vision!

Past: Images and Links in HTML Next: Using SPAN and DIV for Layout