Tables are sort of hard and confusing to get used to at first, but once you remember the difference between rows and columns, it get's a lot harder. First, let's start with a basic table code, with two columns and one row.
<table border="1">
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
</tr>
</table>
This code produces this table:
Column 1
Column 2
I put the border in so you could see where the cells started and ended. But, let's look at the code again and see which tags to what:
<table> This starts your table.
<tr> This starts a new table row. Remember: tr stand for table row. Creating a new row makes all the content after it go below the content before it.
<td> This starts a new table column, and also a new table cell. Columns are the ones that go side by side, and cells are what your content is contained in.
So now that we have basic tags under control, let's learn how to do basic interesting things with them!!
Things you can do to the <table> tag: Adding borders: Like in my example above, you add . Your number is the thickness of your border. To get rid of your border, replace the # with a 0.
Setting the width and height: Add width="#" and height="#", and replace # with the number of pixels of your choice.
Changing the background colour: Add bgcolor="COLOUR". Replace where it says COLOUR with either your hex code, or colour name.
Changing the font colour: Add color="COLOUR". Replace where it says COLOUR with either your hex code, or colour name.
Cell Spacing: Add cellspacing="#" to your table tag to change how far apart your cells are spaced from each other. Change the # to any number, and that's how many pixels they'll be spaced by.
Padding: Add padding="#" to your table tag to change how close your content comes to the edges of your cells. Change # to any number, and that's how many pixels away from the edge of your table/cell your content will be.
And remember, you can also use the style="" tag to add all sorts of crazy cool CSS things to your table instead! Just put all your css codes between the ""s, and you're good to go!
Things you can do to the <td> tag: Any of the above codes apply to the <td> tag, and they'll only effect that one cell, but there are some new things you can do to them:
Vertical Align: This helps for when you have a preset height to your cell, but you only have a little bit of content. By default, it'll all show up half way down your cell, and to fix that, add valign="top" to your td tag so all your text gets aligned to the top of your cell.
Column Span: This changes how may columns a cell spans over. So, if you have multiple rows, and you want one of your cells on top to be the same size as two of the ones on the bottom, then you put this in your td tag colspan="2". You can add any number depending on how many columns you want your cell to take up, this is just an example:
Column 1, row 1
Column 2, row 1. This cell takes up two columns.
Column 3, row 1
Column 4, row 1
Column 1, row 2
Column 2, row 2
Column 3, row 2
Column 4, row 2
Row Span: In the same way, you can add rowspan="2" to your td tag so that your table cell takes up more than one row, like this:
Column 1, row 1
Column 2, row 1 and 2. This cell takes up two rows.
Column 3, row 1
Column 1, row 2
Column 3, row 2
Column 4, row 2
It all takes a little while to get used to, but it's easier if you THINK about what you want your table to look like, and actually draw out all the cells (on paper or in your mind =P), then once you know that, you'll know where to put in column and row spans.
As for your <tr> tag, there's really nothing you can do with it that matters. It pretty much starts a new row for you, and that's about it. So, I hope this helps you with creating tables! Tables can be useful for lots of different things! You can use them to create layouts, organize content, and much more!
