Last week I wrote about how to create a HTML table in a blog post. Once you’ve mastered the basic table, here’s some ways that you might want to adjust it.
Add lines/ outlines
The lines on your table are called the border. You add the border by putting the border code into the first line of your table code. The number will control how thick the line is so “1” is quite narrow and “”4” is quite thick. If you don’t have the border in the code then your table won’t have any visible border but will have dotted lines in the edit screen so you can see the cells.
<table border=”1″>
Cell Padding
Use this to add space between the contents of the cell and the borders of the cell. Again it can be added into the first line of your table code. The number indicates how much space there will be in pixels, so “10” is 10 pixels of space.
<table cellpadding=”10″>
Add Headings to a HTML Table
Sometimes you may want headings in the first row of your table. Put this in the first row to create the headings:
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
Add a caption to a HTML Table
This is like having a heading outside the table. By default, the caption will be at the centre top of your table. If you want it at the bottom, you can add align=”bottom” into the first tag. (Note: this may not work on all browsers so some readers may not see the caption at the bottom.)
<caption>caption text here</caption>
Set the Width of a HTML Table
If you want your table to be a particular width, you can set that with the width code in the first line of the table code. The number is pixels, so “300” creates a table that is 300 pixels wide. You can also set the widths of various columns by adding the width code to the first row of cells. If you don’t add width code, then the cells will all be the same width within the table. For example, if the width of the table is 300, then the two columns would be 150 each by default.
<table width=”300″>
<tr>
<td width=”100″>Column 1</TD>
<td width=”200″>Column 2</TD>
</tr>
</table>
| Header 1 | Header 2 | Header 3 |
|---|---|---|
 |
 |
 |
| How to Blanket Stitch | Making a Text Button | Clothes Peg Planes |
Here’s the code so you can see where I put the extra things in bold:
<table width=”500″ border=”2″ cellspacing=”20″ cellpadding=”10″ align=”center”>
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<img class=”aligncenter size-thumbnail wp-image-8864″ title=”blanket stitch button” src=”http://thecraftymummy.com/wp-content/uploads/2012/08/blanket-stitch-button-150×150.jpg” alt=”how to blanket stitch” width=”150″ height=”150″ />
<img class=”aligncenter size-thumbnail wp-image-8437″ title=”skitch text button” src=”http://thecraftymummy.com/wp-content/uploads/2012/07/skitch-text-button-150×150.png” alt=”make text button with skitch” width=”150″ height=”150″ />
<img class=”aligncenter size-thumbnail wp-image-8444″ title=”clothes peg planes button” src=”http://thecraftymummy.com/wp-content/uploads/2012/07/clothes-peg-planes-button-150×150.jpg” alt=”” width=”150″ height=”150″ />
</tr>
<tr>
<td style=”text-align: center;”><strong>How to Blanket Stitch</strong></td>
<td style=”text-align: center;”><strong>Making a Text Button</strong></td>
<td style=”text-align: center;”><strong>Clothes Peg Planes</strong></td>
</tr>
</tbody>
<caption align=”bottom”>Here’s my Clever Caption</caption></table>
Two more extras:
Create cells that span two columns
If you want a heading that covers two columns, you can add a “colspan” code. You can also use this to make cells span more than 2 cells by changing the number to 3, 4 or more.
<th colspan=”2″>…</th>
Create cells that span two rows
For a cell that is is as wide as two rows, you can add in a “rowspan” code. Like the colspan code, this can be used to make the cell span more rows as well.
<tr rowspan=”2″>…</tr>
Here’s my table again with those two added:
| Header 1 | Header 3 | |
|---|---|---|
|
|
|
| How to Blanket Stitch | Making a Text Button | Clothes Peg Planes |
| Making a Text Button | Clothes Peg Planes | |
And here’s the HTML code for this table:
<table width=”500″ border=”2″ cellspacing=”20″ cellpadding=”10″ align=”center”>
<tbody>
<tr>
<th colspan=”2″>Header 1</th>
<th>Header 3</th>
</tr>
<tr>
<img class=”aligncenter size-thumbnail wp-image-8864″ title=”blanket stitch button” src=”http://thecraftymummy.com/wp-content/uploads/2012/08/blanket-stitch-button-150×150.jpg” alt=”how to blanket stitch” width=”150″ height=”150″ />
<img class=”aligncenter size-thumbnail wp-image-8437″ title=”skitch text button” src=”http://thecraftymummy.com/wp-content/uploads/2012/07/skitch-text-button-150×150.png” alt=”make text button with skitch” width=”150″ height=”150″ />
<img class=”aligncenter size-thumbnail wp-image-8444″ title=”clothes peg planes button” src=”http://thecraftymummy.com/wp-content/uploads/2012/07/clothes-peg-planes-button-150×150.jpg” alt=”” width=”150″ height=”150″ />
</tr>
<tr>
<td style=”text-align: center;” rowspan=”2″><strong>How to Blanket Stitch</strong></td>
<td style=”text-align: center;”><strong>Making a Text Button</strong></td>
<td style=”text-align: center;”><strong>Clothes Peg Planes</strong></td>
</tr>
<tr>
<td style=”text-align: center;”><strong>Making a Text Button</strong></td>
<td style=”text-align: center;”><strong>Clothes Peg Planes</strong></td>
</tr>
</tbody>
<caption align=”bottom”>Here’s my Clever Caption</caption></table>
Note: When you make the first heading go over two columns, the heading 2 cell is taken out of the code altogether. Likewise, when the “rowspan” code is used, you need to remove a cell in the next row to accommodate that. I have made those rows of code red so you can see them easily.
