|
|
|
|
 |
How to Create Tables in HTML – Part 2 Aligning those rows and columns In part one we looked at putting a basic table together, adding column headers and colouring the cells. In part two we’ll look at some more advanced examples that control the spacing and alignment of your tables. Spanning Columns To create a cell that spans two or more columns, you use the colspan command as follows: <table
border=”1” colspan=3 cellpadding=3> The resulting table looks something like this:
You’ll notice that the colspan command creates a table with a row spanning 3 cells. You could use colspan=2 to just span the first two columns but then you’d need to add another td to add a third column on that row to keep things tidy. We also introduced another new command called align. You use align to control where text is positioned within a cell. In this case we use align=center which makes the text appear in the middle of the cell. You can also use align=left or align=right. You can also span cells on different rows. Perhaps you might want to span the first as above but then on a third row span the first two cells with the third cell left as normal. Spanning Rows Spanning rows is a little harder to get right as it does require some forethought. You may find it easier to draw out your table layout first so you can work out quite how you are going to construct it. Let’s look at an example of row spanning to see how it works. <table
border=”1” width=”350” cellpadding=3> The width command specifies the width of a given cell. In this case it describes the width in pixels. You can also specify the width as a % of the page width by using width=”30%”. The choice is down to you. Specifying pixels is useful if you want to fine tune the size of the table and need it to always be exactly the same size. Using percentages is useful if you want the table to change its size and shape as the user resizes their browser. With percentages, the cells will look wider on a 1024x768 resolution screen than an 800x600 one and if the user then adjusts their browser to 640x480, the table will adjust itself again. The rowspan above initially looks a little confusing so lets go through it line by line. The first row specifies that the first cell will span three rows then describes the second cell as normal. The subsequent rows do not need to specify the first row as that will automatically be created by the first rowspan command. Accordingly, the next two rows only need to describe the second column. The result looks like this.
Over to You You now know how to create simple tables, colour them, add headers, span and align them. To take things further the best way to learn is to experiment by mix and matching each of the commands together to get coloured, spanned tables with headers or whatever your creative heart desires!
|
||||||||||||
