Create tables is one of the more difficult HTML code to master when making your own website. It is well worth the effort to learn it as it can help you to align each section of your website. You need to think a little bit more abstractly and imagine how the table will look like after you have done the HTML coding.
Some instructional text books said the tables were one of the most misuse codes for HTML. Hey, whatever works to tame your text, graphics and various sections in proper alignment!
The basic HTML codes for tables are:
- <TABLE> – table tag
- <TR> – table row tag
- <TD> – table definition column tag
To create your first simple table, just code it as below. The inclusion of BORDER=1 attribute makes the table visible. You may omit this code to make a borderless table or increase the number to make it thicker. However if you want better control of the table attribute, you should use CSS (Cascading Style Sheet), which is more advance technique of making your web site and controlling the various elements on a web page.
|
<TABLE BORDER=1>
<TR> <TD> Write some text here like: </TD> |
And what you get is this:
|
Write some text here like: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer et nisl in eros mattis convallis. Duis turpis nunc, pretium ornare, fermentum id, ullamcorper vitae, eros. Mauris libero. Integer elementum sodales elit. Praesent quis felis. Duis ligula. Donec a risus. |
That was the easy part; now for the complicated part of making table with many rows and definition columns. This requires some abstract imagination on your part to get the TR row tag and TD column tag correct. One way to get it right is to draw out the table structure first.
A three column table structure can be drawn out as thus:
|
<TABLE BORDER=1>
</TABLE> |
Then later you can easily code according to what you have drawn.
|
<TABLE BORDER=1>
<TR> <TD> Some content 1 </TD> </TR> <TR> <TD> Some content 2 </TD> </TR> <TR> <TD> Some content 3 </TD> </TR> </TABLE> |
And the end results will be:
| Some content 1 | Some content 2 | Some content 3 |
To create multiple boxes, pre-draw with the code as thus:
|
<TABLE BORDER=1>
</TABLE> |
And code it out as thus:
|
<TABLE BORDER=1>
<TR> <!—this is where the second row will come in –> <TR> </TABLE> |
And you will get:
| Some content 1 | Some content 2 | Some content 3 |
| Some content 4 | Some content 5 | Some content 6 |