| Department of Planetary Sciences Lunar and Planetary Laboratory |
 | |
HTML Class |
|
| Department of Planetary Sciences Lunar and Planetary Laboratory |
| |
HTML Class |
Again, its always good to start with what the w3c says about
tables.
Tables begin and end with the
So a basic table is laid out like this (I've put
<table> tags
and are organized via their rows. Rows are started via the
<tr> tag, and don't need to be closed. Within
the rows there are elements or cells that are started with
the <td> tag, again these don't need to be
closed, when the browser sees another <td>
it starts another element.
border=1
so that you can see the borders of the table, the default is not
to show borders, or it can be forced by border=0):
<table border=1>
<tr><td>a <td>b <td>c
<tr><td>d <td>e <td>f
</table>
| a | b | c |
| d | e | f |
That's it. Its that simple. Now, you can also make things span more than one row or column, like so:
<table border=1> <tr><td rowspan=2>a <td>b <td>c <tr><td>d <td>e <td>f </table>
| a | b | c |
| d | e | f |
The trick is that your browser is going to read through the
elements of your table in a linear fashion. In the above example
I told the cell with a in it to span two rows, however,
in the second row, there were three elements, so it had to make
the whole table four columns to display all the data. Just keep
in mind that if you start spanning rows and columns, you have to
keep track of how its going to be laid out.
The following might have been more of what you would expect, but notice that I had to remove elements from the second row.
<table border=1> <tr><td rowspan=2>a <td>b <td>c <tr><td colspan=2>e </table>
| a | b | c |
| e | ||
These are the basics for tables. There are attributes that will control the cell size, border thicknesses, alignment of characters within the cell, etc, etc. I suggest visiting the w3c site to get all the extras.
Back to the
HTML Class page
PtyS/LPL
Home Page