Table examples

No, not an Ikea page. 

I've created a selection of tables at the bottom of the page. But first, let's have a look at the code for a table. Skip this if I'm stating the obvious.

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<tbody>
<tr>
<td> &nbsp;</td>
<td> &nbsp;</td>
</tr>
<tr>
<td> &nbsp;</td>
<td> &nbsp;</td>
</tr>
</tbody>
</table>

Tables are formed by the Table / Table body / Table row / Table data tags:

<table><tbody><tr><td>

These need to be opened and closed to complete a table. The unumber of cells is deinfed by the number of table data <td> tags you've got in a row. 

Settings such as border, cellpadding etc. can be defined as attributes inside the initial table tag, as in the example above.

HTML 5 allows you to add some extra tags in to govern columns. These come after the initial table tag. For example

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<colgroup>
<col style="width:120px">
</colgroup>
<colgroup>
<col style="width:370px">
</colgroup>
<tbody>
<tr>
<td> &nbsp;</td>
<td> &nbsp;</td>
</tr>
<tr>
<td> &nbsp;</td>
<td> &nbsp;</td>
</tr>
</tbody>
</table>

This adds controls the width of the first column [120px] and the second column [370px], which can give you greater cotnrol over the look of the table. There are loads of other attributes you can use with colgroup / col. Just Google it and examples will come up. 

The key thing to remember is if you're copying the code for a table, copy everything inside the table tags: <table> ... </table>

 Hope that makes sense.

 

...

 

Table examples. Change the width by tweaking the attributes in the table tag. Remember, some of our table settings are controled via css, so if something doesn't work as you want, let me know. So, for example, if you don't want a border on the cells, go in and change border to 0. 

 

2 x 2

   
   

 

2 x 2

Date Place Bishop
Monday 23 September    

 

2 x 3

     
     

 

 

2 x 4

       
       

 

2 x 5

         
         

 

 

Scroll to Top