Announcement

Collapse
No announcement yet.

HTML 101: pt4 - Displaying Data - Tables and Lists

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • HTML 101: pt4 - Displaying Data - Tables and Lists

    Part 3: Pulling it Together with Links

    The original purpose of HTML was to combine the various data that were being churned out of the experiments at CERN (European Organization for Nuclear Research). It kind of grew a bit from those origins almost 20 years ago but, if you look close enough, you can see its roots.

    Tables are one of the oldest elements available in HTML for laying out content – although this is no longer the standard way of doing it. Using CSS for layout design results in faster downloads and page-drawing on the client, and also for easier modification.

    Still, tables are extremely useful if you actually have something that needs to be put into a table.

    Simple Table

    Code:
      <table>
        <tr>
          <th>
            Column Heading 1
          </th>
          <th>
            Column Heading 2
          </th>
        </tr>
        <tr>
          <td>
            Row 1, Column 1
          </td>
          <td>
            Row 1, Column 2
          </td>
        </tr>
        <tr>
          <td>
            Row 2, Column 1
          </td>
          <td>
            Row 2, Column 2
          </td>
        </tr>
      </table>
    This will create a table that is 2 columns wide, and 2 rows long, and has column titles on the top.

    Code:
     +------------------+------------------+
     | Column Heading 1 | Column Heading 2 |
     +------------------+------------------+
     | Row 1, Column 1  | Row 1, Column 2  |
     +------------------+------------------+
     | Row 2, Column 1  | Row 2, Column 2  |
     +------------------+------------------+
    Simple enough….

    Complex Layout

    Now, say you want a layout like:

    Code:
     +------------------+------------------+------------------+
     | Row 1, Column 1  | Row 1, Column 2  | This information |
     +------------------+------------------+ applies to both  |
     | Row 2, Column 1  | Row 2, Column 2  | rows             |
     +------------------+------------------+------------------+
    Well, the following code would achieve it:

    Code:
      <table>
        <tr>
          <td>
             Row 1, Column 1
          </td>
          <td>
             Row 1, Column 2
          </td>
          <td rowspan=’2’>
             This information applies to both rows
          </td>
        </tr>
        <tr>
          <td>
             Row 1, Column 1
          </td>
          <td>
             Row 1, Column 2
          </td>
        </tr>
      </table>
    Notice how the second <tr> element only contains two <td> elements.

    The rowspan attribute enables you to specify that a cell should take up multiple rows. Similarly, the colspan attribute works for columns.

    The problem with tables is that the browser needs to first work out the size of the table and then draw it, and it is this which would slow down the drawing of the page if they were used for layouts.

    Still, you do get the closest match between IE and Firefox (and Opera) when using tables with the least effort, and so you will find that many sites still rely on them for design.

    If at all possible, avoid table layouts and only use them for actual data.

    Lists

    A lot of things come in lists – shopping, books, music tracks, instructions. Sometimes they have an order (a music top 40 for example), and sometimes they don’t (a set of items required for an activity).

    HTML can handle both.

    Chaos – Unordered Lists

    If you happy enough to have no order (except that which you type in), then use the unordered list:

    Code:
      <ul>
        <li>Unordered lists can be used as bullet points for listing attributes</li>
        <li>OR properties</li>
        <li>OR links to other websites</li>
      </ul>
    And of course, a lot more besides.

    Order Lists

    Code:
      <ol>
        <li>This would be number 1 in the list</li>
        <li>And this would be number 2</li>
      </ol>
    By default, ordered lists are numbered with Arabic number (0-9). However, there are some CSS style properties that can be used to change this – you can have roman numerals, letters, and so on.

    Lists of Lists

    You can even have lists of lists:

    Code:
      <ol>
        <li>
          <ul>
            <li>This is bullet within item 1</li>
            <li>Another bullet</li>
          </ul>
        </li>
        <li>
          Item 2 has bullets because it is simpler
        </li>
      </ol>
    Or list of lists of lists of lists of lists of lists of lists….

    Sorry, got carried away there.

    The next tutorial will cover the use of structured text elements to describe information on your page…

    Part 5: Structured Text

  • #2
    That's cool to know tables - but for SEO reasons, wouldn't be better to have sites that are tableless? - just go with CSS containers? Just a thought - that way, it will give bots an easier time to chew info.

    Comment


    • #3
      Very nice Horus:
      Very well explained. Plus I didn't spot no spelling mistakes so it makes it, allot easier. =D

      Comment

      Working...
      X