HomeInformationTutorialsResourcesContact
What is This?
This is the online tutorial/resource blog of Geng Hao/doughnutcrazy.
If you have any questions or comments regarding this blog, feel free to leave a tag under "Contact" or leave a comment with the comment function in every post.
HTML: Tables
You'll be learning how to code and use tables in this tutorial.
Tables are generally made to organise your data, but sometimes it is a useful tool in creating grid and column layouts.
However, tables usually take a longer time to load than DIV layers, so if you are experienced in coding DIV layers, it is better to use that method to code grid and column layouts instead of using tables to do so.
For this example, we will make a layout with a header and two columns with tables, with a total width of "400 pixels" (400px)".

  1. We'll start by coding the base of the table. The format of a table is slightly more complicated than a DIV layer.
    Here's how the code looks like:

    <table border="0" cellpadding="0" cellspacing="0" width="400px">
    <tr><!-- "tr" is used to create rows in a table. -->
    <td valign="top"><!-- "td" contains the content in a column or row. -->
    Your content here!
    </td>
    </tr>
    </table>


    That will only give you a row of text. The outcome we are aiming for is a header and two columns. We'll code the columns first.

  2. Columns can simply be made by coding two or more "td"s in one single row ("tr").
    For this example, we will have an entries section and a sidebar.
    The code will look like this:

    <table border="0" cellpadding="0" cellspacing="0" width="400px">
    <tr>
    <td valign="top" width="250px">
    Your entries here!
    </td>
    <td valign="top" width="150px">
    Your sidebar here!
    </td>
    </tr>
    </table>


    The codes look pretty complicated, but it is actually very simple if you get the hang of it.

  3. We'll start coding the header next. As the header is a row instead of a column, we will have to add an extra "tr" to place the header.
    Your code will now look like this:

    <table border="0" cellpadding="0" cellspacing="0" width="400px">
    <tr>
    <td valign="top" width="400px">
    Your header here!
    </td>
    </tr>
    <tr>
    <td valign="top" width="250px">
    Your entries here!
    </td>
    <td valign="top" width="150px">
    Your sidebar here!
    </td>
    </tr>
    </table>


    But, wait! It looks a little screwed up, doesn't it? The header is the same width as the entries section only.

  4. Thankfully, there is a solution to this problem. By adding a colspan command to the header, it will take up the total width of the number of columns in its value.
    For this example, there are only two columns, so your code will look like this:

    <table border="0" cellpadding="0" cellspacing="0" width="400px">
    <tr>
    <td colspan="2" valign="top" width="400px">
    Your header here!
    </td>
    </tr>
    <tr>
    <td valign="top" width="250px">
    Your entries here!
    </td>
    <td valign="top" width="150px">
    Your sidebar here!
    </td>
    </tr>
    </table>


    We're finished with the layout! You can obviously style the tables as you wish, it's as customisable as a DIV layer. Have fun coding your tables!

Labels: