Jump to content


Photo
- - - - -

HTML Tables


  • Please log in to reply
2 replies to this topic

#1 Kremlin

Kremlin

    Sigma

  • Christadelphian MD
  • PipPipPipPip
  • 2,159 posts

Posted 16 March 2005 - 12:53 PM

How to use HTML tables.

Tables are a useful way of presenting material taken from other sources (documents, overheads, etc) in a grid-like form, or for presenting comparisons between two sets of information, or even to line up pretty picture layouts if that is what you want. Here on this forum it will most likely be used for the former reasons.

Tables simply are groups of cells arranged in a (rows)x(columns) format, and as such before you can make the table structure you need to know how many rows and colums you will want - this is easy if you are just replicating material from another source.
The second thing you need to know is how these are represented in HTML. The rows always go first, followed by the columns - this will become clear in a moment.

Say I wanted to present a comparison of today and yesterday.
This would mean I want two columns - as I would want to compare them vertically.

But I also need to have an extra column which tells me what I'm actually comparing - for example, weather, temperature, how late the train was... etc. so make that 3 columns.

Now - here's my data set.
Today was overcast, 19 degrees centigrade, and the train was on time.
Yesterday was fair, 25 degrees centigrade, and the train was 5 minutes late.

So we need three rows to represent this - but wait! We need to know which day we're talking about. So make that 4.

This first step is often one that people get wrong when drawing up tables - forgetting to add an extra row and column for the labels.

So our table structure is going to be 4x3 to present the data.

The next thing to realise about html tables is the size. You can specify an absolute size (in pixels on the screen), which is probably not a good idea because of different resolutions, font sizes, etc that people will view your post in.
You can also use a relative size, such as % of available space.
By default, tables will take up as little space as possible horizontally and only as much space as they need to display the lines of text (or graphics) vertically. This works well for basic stuff, but you might find things get cramped a bit. Examples of this will follow.

Okay, we're all set to make up our tables. First, we must use the special BBCode tag for presenting html on Invision Board systems, which is the DOHTML tag. If you don't know how to use BBCode tags already, please visit the relevant help file so that you can get comfortable with how they work.

To start with, a html table is opened using a <table> tag, and closed similarly, like this:
<table>
</table>

As mentioned above, a row will always be first in the code, and the columns or cells within that row be nested inside. The html tag for a table row is <tr>. So our code now looks like this:

<!-- a table -->
<table>
   <!-- a new row in the table -->
   <tr>
        <!-- content - this is a html comment by the way -->
   </tr>
   <!-- row 2 -->
   <tr>
        <!-- content -->
   </tr>
   <!-- row 3 -->
   <tr>
        <!-- content -->
   </tr>
   <!-- row 4 -->
   <tr>
        <!-- content -->
   </tr>
</table>

Okay, now we need to add the individual cells to each row, and they are nested inside the <tr></tr> tags where the content comments are at the moment. The html code for a new table cell is <td>. So lets add 3 cells per row (thus making our 4x3 table) to our existing code.

<!-- a table -->
<table>
   <!-- a new row in the table -->
   <tr>
        <!-- a table cell, column 1 -->
        <td></td>
        <!-- next cell -->
        <td></td>
        <td></td>
   </tr>
   <!-- row 2 -->
   <tr>
        <!-- content -->
        <td></td>
        <td></td>
        <td></td>
   </tr>
   <!-- row 3 -->
   <tr>
        <!-- content -->
        <td></td>
        <td></td>
        <td></td>
   </tr>
   <!-- row 4 -->
   <tr>
        <!-- content -->
        <td></td>
        <td></td>
        <td></td>
   </tr>
</table>

Now it simply remains to go through and insert our content into the tables. Two things to remember - firstly that it's rows by columns, so go through and add each cell content to it's respective <td> tag in that order, and secondly, that any formatting (eg bold, italics, colours, etc) will have to be done in html code - BBCode won't work inside a DOHTML tag. The html tags for formatting can be looked up on the web, but if you are getting this complex it might be worth finding a free WYSIWYG html editor (or a commercial one such as Dreamweaver) to create the tables with proper formatting for you, and then just copy and paste the code in.

Continuing on from our example, our final code should look like this:
<!-- a table -->
<table>
   <!-- a new row in the table -->
   <tr>
        <!-- a table cell, column 1 -->
        <td></td>
        <!-- next cell -->
        <td>Today</td>
        <td>Yesterday</td>
   </tr>
   <!-- row 2 -->
   <tr>
        <!-- content -->
        <td>Weather</td>
        <td>Overcast</td>
        <td>Fair</td>
   </tr>
   <!-- row 3 -->
   <tr>
        <!-- content -->
        <td>Temperature</td>
        <td>19*C</td>
        <td>25*C</td>
   </tr>
   <!-- row 4 -->
   <tr>
        <!-- content -->
        <td>Train?</td>
        <td>On time</td>
        <td>5m late</td>
   </tr>
</table>

stick this between two html tags and we have this: (You'll have to remove comments by the way, since Invision board's html parser isn't the greatest)

<table>
  <tr>
        <td></td>
        <td>Today</td>
        <td>Yesterday</td>
  </tr>
  <tr>
        <td>Weather</td>
        <td>Overcast</td>
        <td>Fair</td>
  </tr>
  <tr>
        <td>Temperature</td>
        <td>19*C</td>
        <td>25*C</td>
  </tr>
  <tr>
        <td>Train?</td>
        <td>On time</td>
        <td>5m late</td>
  </tr>
</table>


Okay - we could probably end the help file here, as we have a functional example of a table. Simply change the number of rows and cells used and you can create a table of whatever dimensions you like, and put whatever content you want inside.

There are many other options for formatting tables, however. One mentioned before is the size - for example, with the simple use of a html property "width" we can change the size of the table. Lets make the width as much as it can fit - 100%, for example. Just change the table tag like so:
<table width="100%"> <!-- don't forget the quote marks - they are important -->
content blah blah
</table>
And the result is this:

<table width="100%">
  <tr>
        <td></td>
        <td>Today</td>
        <td>Yesterday</td>
  </tr>
  <tr>
        <td>Weather</td>
        <td>Overcast</td>
        <td>Fair</td>
  </tr>
  <tr>
        <td>Temperature</td>
        <td>19*C</td>
        <td>25*C</td>
  </tr>
  <tr>
        <td>Train?</td>
        <td>On time</td>
        <td>5m late</td>
  </tr>
</table>

Notice the table has stretched to fill up the whole width of the quote box.

The width property also applies to <td> entries, but not to <tr> ones since rows have no width, only height. For example, we can set the width of the cell containing "On Time" to be only 20 pixels, and this is the result (I've set the table width to 50% of the space as that's a reasonable amount to use):

<table width="50%">
  <tr>
        <td></td>
        <td>Today</td>
        <td>Yesterday</td>
  </tr>
  <tr>
        <td>Weather</td>
        <td>Overcast</td>
        <td>Fair</td>
  </tr>
  <tr>
        <td>Temperature</td>
        <td>19*C</td>
        <td>25*C</td>
  </tr>
  <tr>
        <td>Train?</td>
        <td width="20">On time</td>
        <td>5m late</td>
  </tr>
</table>

As you can see, it's affected that whole column by making it as small as possible (if the number you supply is smaller than the content can be fitted into, it will just make it as small as possible), which changes the way the whole table fits together.

More options to play around with are cell spacing and padding - this controls how much gap appears between cells, and the second how much space appears between the invisible cell walls and the text inside them. The defaults in both cases are 0 pixels, or no spacing. One final option you may want to use is the alignment, with use of the "align" tag for each cell. The default appears to be left aligned, but you can make things centred or right aligned as well. Remember though, the more playing around with the table, the more likely you'll be wanting to use a WYSIWYG editor to make the code for you, instead of fiddling around and tweaking it to get it looking right.

I hope this has been helpful!

#2 Sammo

Sammo

    Pi

  • Christadelphian MD
  • PipPipPip
  • 720 posts

Posted 29 May 2008 - 12:50 AM

This doesn't work.

#3 Flappie

Flappie

    Psi

  • Christadelphian MD
  • PipPipPipPipPipPipPipPipPip
  • 7,730 posts

Posted 29 May 2008 - 01:04 AM

Between where you type and such and the "add reply" button, there's a dropdown box with the label Post Options, make sure it is set to HTML On.

You don't need the DOHTML BBCode tag anymore, just type straight HTML.
"I am Flappicus!"
"The first condition of immortality is death."
Broeders in Christus




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users