|
When learning HTML, it is crucial that you understand how to properly create and format
tables - this is because it is one of the 2 ways used to format webpages (the other is CSS).
It is relatively simple to code once you understand the basics, which will be discussed
here.
There are four basic tags you should know when coding a table, which are:
- <table> - Marks start and end of table.
- <tr> - Dictates a table row.
- <th> - Table header.
- <td> - Table "Data".
Let us see how to use these tags by looking at an example. Imagine that we want to design
a simple webpage with the following design:
In this example the table has 3 sections, one for the logo, one for the content and one for
the footer. The table is 800 pixels wide and is aligned in the center of the page (the white
space to the right and left of the table represents the rest of the webpage). If you are sharp
you might have noticed that this is similar to the design of this website, although it is a
little simplified. However all of this is very simple to code if you can get your head around
the way tables work.
To aid you in this process let's go through the code below line-by-line. This is the HTML
code I could use to achieve the table described in the picture:
1. <html>
2. <head>
3. <title>Simple HTML Table Code</title>
4. </head>
5. <body>
6.
7. <table width = "800px" align = "center">
8. <tr>
9. <td>
10. <!-- Logo Here -->
11. </td>
12. </tr>
13. <tr>
14. <td>
15. <!-- Content Here -->
16. </td>
17. </tr>
18. <tr>
19. <td>
20. <!-- Footer Here -->
21. </td>
22. </tr>
23. </table>
24.
25. </body>
26. </html>
|
The first thing to notice is on lines 7 and 23. Here we are using the <table> tag
to state that we are creating a table - everything between these 2 tags are seen as the
table's content. You'll also notice that with the table start tag, i.e. <table>, we
are actually defining the width and alignment of the table. The way you set these attributes
are pretty self-explanatory and will be covered in more detail later on in this tutorial.
The main thing to notice here in the use of the 4 tags mentioned previously.
When creating a HTML table you do so row by row. In the above code the first row is
defined by the <tr> and </tr> tags used on lines 8 and 12. Once we create a row
we need to state how many cells the row has by using the <th> or <td> tags. In
this particular case we are trying to create a table with 3 rows, each of which have
1 cell that stretches the span of the table. This is why there is only one set of
<td></td> tags within the <tr></tr> tags.
[
Back to HTML Tutorials ]
|
