HTML is short for HyperText Markup Language and is the predominant language used for the creation of web pages. Put more simply, HTML tells your browser how to display information (text, pictures, etc) on your computer screen.
When Josh and Ryle originally set up SummitPost for us mountaineering types to use, part of their job was to provide most of the “background” HTML (or framework) needed to make members’ pages display properly. Their superb design offers members with no knowledge of HTML the ability to design excellent pages. At the same time it allows those who wish to use HTML to gain precise control over how their pages look on the screen. As time passes more and more of SummitPost's members come to truly appreciate the extremely elegant design of this world-class web site.
List Tables
Now, if you are one of those members who have never used HTML in your SummitPost pages, but may have wanted to add a list to your mountain page, what follows is for you. This is a tutorial, I hope understandable, on the building of tables for use on SummitPost pages. Though tables can be used for other purposes, here I’ll concentrate on their use for displaying lists of information.
Trapper Peaks
Applying a table to a list is one way to make a list look good, and in many cases more understandable. A few SummitPost members are very good with tables and use them extensively on their pages; I’d be willing to bet that most of these very same people have at least some experience with computer programming. Fortunately a history with one or more computer languages is not an absolute necessity before a person can use a bit of HTML to build a table which will nicely display a list of summits or other mountain-related items. What follows is directed at those with little or no experience at computer programming, beginners not experts. You other folks don’t need any help!
The following tutorial is specific to designing list tables for SummitPost.
Getting Started
Dead Tree
First, accept that you don’t have to comprehend absolutely everything about HTML in order to use it. You only need to understand what each of the codes you will be using means: what they’re telling a browser to do. A good analogy might be driving a car. Few of us know how an engine works, especially today’s computerized ones, but we can still drive – brakes, accelerator, turn signals, gas tank – those things we understand.
So relax. Using HTML to build a table is not so different from driving a car. Well except for the fact that using HTML doesn't require insurance payments and repairs only requires a few minutes of time to fix, not piles of money. Other than that...
HTML is a directive (to a browser) which resides between greater-than and less-than symbols. < html directions >. Each of these directives is referred to as a TAG.
At its simplest, a table consists of nothing more than a bunch of lines, each of which are made up of a cell or cells that contain information – text, pictures, colors, whatever.
To display the most basic of tables, one which contains 1 row and 1 cell, requires only... < table > - tells the browser that the following HTML tags define a table < tr > - tells the browser to begin a row in the table < td > - tells the browser to begin a cell on that row These are the contents of the cell < /td > - tells the browser to end that particular cell < /tr > - tells the browser to end that particular row < /table > - tells the browser to end this table
The resulting table looks like this...
These are the contents of the cell
Of course, a single-celled table is not particularly useful in this case. More than likely, you won’t be making lists which consist of only one item – not exactly a list, is it? But, you might be designing a list of summits, maybe similar to the one I built not long ago of the Bitterroot Summits over 9,000’. I’ll use the six highest Bitterroot Mountain summits from my list to build an example table. To begin, our table will be little more than a basic list, then, as we add more HTML tags, it will progress to something looking a bit more elegant.
To make things more understandable, in the following examples I’ve made liberal use of color to differentiate between HTML, code changes, and explanations. In addition, I think it helps, at least initially, to group HTML tags defining tables into those pertaining to single rows. This not only helps focus your attention on a row-at-a-time, but makes it much easier to find typos and other mistakes later if (or should I say WHEN) the output on your screen doesn’t look like you expected.
Snow Covered Trees
And to relieve any monotony which might develop, I've included a few pictures of mountains and such along with the text. After all, mountains are why we're all here on SummitPost!
HINT – To make sure you will still understand your HTML when you look at it a couple weeks later, be sure to include comments – the more the better. Assuming you’ll remember everything is a mistake. You won’t!
But, you don’t want your comments to appear on the screen and you don’t want a browser to consider them to be a tag. So, begin each comment with <! and end it with >, like this...
< ! --- this is an HTML comment --- >
It's that explanation point immediately after the less-than symbol (with no space between) which signals to the browser that a comment follows.
< ! -- a partial table of the Bitterroot Summits over 9’000’ -- > < ! -- first row contains column descriptions (headings) -- > < table > - begin table < tr > - begin row < td > Summit Name < /td > - begin cell – cell data – end cell < td > Elevation < /td > < td > Latitude < /td > < td > Longitude < /td > < /tr > - end row
< ! –- first row of summit information -- > < tr > < td > Trapper Peak < /td > < td > 10,157' < /td > < td > 45.88989 N < /td > < td > 114.29685 W < /td > < /tr >
< ! –- second row of summit information -- > < tr > < td > El Capitan < /td > < td > 9,983' < /td > < td > 46.00746 N < /td > < td > 114.39604 W < /td > < /tr >
< ! –- third row of summit information -- > < tr > < td > The Shard (point 9883) < /td > < td > 9,883' < /td > < td > 45.95842 N < /td > < td > 114.33598 W < /td > < /tr >
< ! –- sixth row of summit information -- > < tr > < td > Trapper Peak - West (point 9772) < /td > < td > 9,772' < /td > < td > 45.89138 N < /td > < td > 114.31891 W < /td > < /tr > < /table > - end table
Summit Name
Elevation
Latitude
Longitude
Trapper Peak
10,157'
45.88989 N
114.29685 W
El Capitan
9,983'
46.00746 N
114.39604 W
The Shard (point 9883)
9,883'
45.95842 N
114.33598 W
Boulder Peak
9,804'
45.84721 N
114.34191 W
Trapper Peak - North
9,801'
45.90064 N
114.28955 W
Trapper Peak - West (point 9772)
9,772'
45.89138 N
114.31891 W
Let's put visible borders around each cell and the table itself to make it a little easier to read. It requires only one simple addition to the first tag line (after the initial comment lines).
< table > - tells the browser that the following HTML tags define a table - one small addition in this line gives us... < table border > - the addition tells the browser that the following HTML tags define a table with visible borders
Summit Name
Elevation
Latitude
Longitude
Trapper Peak
10,157'
45.88989 N
114.29685 W
El Capitan
9,983'
46.00746 N
114.39604 W
The Shard (point 9883)
9,883'
45.95842 N
114.33598 W
Boulder Peak
9,804'
45.84721 N
114.34191 W
Trapper Peak - North
9,801'
45.90064 N
114.28955 W
Trapper Peak - West (point 9772)
9,772'
45.89138 N
114.31891 W
There are several things we can do with the borders between cells and around a table, but more about that later.
The Table Header
Dead Sentinels
Looking at our list of summits you notice right away there is no differentiation between the line of column descriptions at the top of the table and the information below. HTML deals with this quite easily by providing a special way to define a cell which is part of a header. When you define a cell which will be in a header, use < th > instead of < td >. The difference is...
< th > - table header (used for cells in a table's header) < td > - table data (used for the standard cells in a table)
Using < th > does two things. It automatically makes the text bold and centers the text (left to right) within the cell. If we change the HTML of our header section to...
< ! -- a partial table of the Bitterroot Summits over 9’000’ -- > < ! -- first row contains column descriptions (headings) -- > < table border > - begin table < tr > - begin row < th > Summit Name < /th > - begin cell – cell data – end cell < th > Elevation < /th > < th > Latitude < /th > < th > Longitude < /th > < /tr > - end row
Our table changes to...
Summit Name
Elevation
Latitude
Longitude
Trapper Peak
10,157'
45.88989 N
114.29685 W
El Capitan
9,983'
46.00746 N
114.39604 W
The Shard (point 9883)
9,883'
45.95842 N
114.33598 W
Boulder Peak
9,804'
45.84721 N
114.34191 W
Trapper Peak - North
9,801'
45.90064 N
114.28955 W
Trapper Peak - West (point 9772)
9,772'
45.89138 N
114.31891 W
Okay, now our header text (column descriptions) stands out from the rest of the list. The list looks better, but the text inside each cell runs right up against the right and left cell margins. It doesn’t look quite right – kind of squeezed.
Leaving Space Around a Cell’s Contents
Buddies
If you look closely at the previous table, you’ll notice that the width of the cells is just large enough to properly display the contents of the cell in each column which has the most width. It’s nice that a browser will automatically adjust a cell’s width and height to fit the contents, but in this case it would look better if there was a bit more space around our text. Fortunately we can tell the browser to leave more white space by including the cellpadding tag when we define our table. It looks like this...
< table cellpadding=n >
Where n is an integer usually from 1 to 10. Larger numbers are okay but things can begin to look strange if you use a too-large number.
The following shows the change to the first “tag” line of our table definition.
< table border > - defines a table - one small addition in this line gives us... < table border cellpadding=5 > - the addition defines a table with extra white space in each cell
Now our table looks like this...
Summit Name
Elevation
Latitude
Longitude
Trapper Peak
10,157'
45.88989 N
114.29685 W
El Capitan
9,983'
46.00746 N
114.39604 W
The Shard (point 9883)
9,883'
45.95842 N
114.33598 W
Boulder Peak
9,804'
45.84721 N
114.34191 W
Trapper Peak - North
9,801'
45.90064 N
114.28955 W
Trapper Peak - West (point 9772)
9,772'
45.89138 N
114.31891 W
See the difference? Experiment with the value of n until you find a result you like. You’re likely to find you use different amounts of white space in tables with dissimilar applications.
More Space Between the Cells
Sometimes you want more space between the cells. That can be accomplished by using the cellspacing tag as part of your table definition. It looks like...
< table cellspacing=n >
Where n is an integer usually from 1 to 10. Again, larger numbers are okay but not often used.
We only need to change the first “tag” line of our table definition.
< table border cellpadding=5 > - define a table - one small addition gives... < table border celpadding=5 cellspacing=5 > - the addition defines a table with extra space between cells
Now our table becomes...
Summit Name
Elevation
Latitude
Longitude
Trapper Peak
10,157'
45.88989 N
114.29685 W
El Capitan
9,983'
46.00746 N
114.39604 W
The Shard (point 9883)
9,883'
45.95842 N
114.33598 W
Boulder Peak
9,804'
45.84721 N
114.34191 W
Trapper Peak - North
9,801'
45.90064 N
114.28955 W
Trapper Peak - West (point 9772)
9,772'
45.89138 N
114.31891 W
Aligning a Cell’s Contents
Paint Brush
There is something which doesn’t look quite right about the column containing elevations. All the measurement are left-justified (the default) and we’re more used to seeing columns like this right-justified. This is one change which must be handled cell-by-cell. We can’t just “redefine” the entire table to take care of it. Too bad.
We will apply the alignment tag to the table data contained in one cell of each row, the one which holds the elevation. The form of the assignment is...
< td align=placement >
Where placement can be right, left, or center. In this case we want it set to right.
Here is the change we’ll be making.
< td > 10,157’ < td > - begin cell – cell data – end cell < td align=right > 10,157’ < td > - begin cell and right-justify contents – cell data – end cell
After making similar changes to each cell containing elevation measurements, our table will look like this.
Summit Name
Elevation
Latitude
Longitude
Trapper Peak
10,157'
45.88989 N
114.29685 W
El Capitan
9,983'
46.00746 N
114.39604 W
The Shard (point 9883)
9,883'
45.95842 N
114.33598 W
Boulder Peak
9,804'
45.84721 N
114.34191 W
Trapper Peak - North
9,801'
45.90064 N
114.28955 W
Trapper Peak - West (point 9772)
9,772'
45.89138 N
114.31891 W
Spanning Mutiple Columns
Wolf Sign
There are times when we want our cell data to span more than one column. Such was the case when I built a table of Bitterroot Mountain summits between 8,500’ and 9,000’. I decided it would be easier to read if I broke the elevations into 100' segments and put a label across the entire width of the table indicating the range of peak elevations in the section immediately below. To do this I used the HTML tag colspan. Used with < td >, this is the form it takes...
< td colspan=n >
Where n equals the number of columns you wish to span.
Here is the HTML required to display a portion of the table.
< ! -- a partial table of the Bitterroot Summits between 8,500' & 9’000’ -- > < ! -- first row contains column descriptions (headings) -- > < table border cellspacing=2 cellpadding=2 > - define the table
< tr > - first table row (header)
< th > Name < /th > - begin cell - column description - end cell
< th > Elevation < /th >
< th > Latitude < /th >
< th > Longitude < /th >
< /tr > - end first row
< ! –- first section header -- >
< tr > - begin section row
< th colspan=4 > 8,900' to 8,999' < /th > - begin cell & have it span 4 columns - cell contents - end cell
< /tr > - end section row
< ! –- first row of summit information -- >
< tr >
< td > Baker Lake Peak (point 8,992) < /td >
< td align=right > 8,992' < /td >
< td > 46.84601 N < /td >
< td > 114.27159 W < /td >
< /tr >
< ! –- second row of summit information -- >
< tr >
< td > Castle Crag < /td >
< td align=right > 8,984' < /td >
< td > 46.33081 N < /td >
< td > 114.37070 W < /td >
< /tr >
< ! –- third row of summit information -- >
< tr >
< td > West Camas Peak (point 8934) < /td >
< td align=right > 8,934' < /td >
< td > 46.16494 N < /td >
< td > 114.32558 W < /td >
< /tr >
< ! –- fourth row of summit information -- >
< tr >
< td > Canyon Lake - West (point 8922) < /td >
< td align=right > 8,922' < /td >
< td > 45.85923 N < /td >
< td > 114.44761 W < /td >
< /tr >
< /table > - end table
Our table looks like this...
Name
Elevation
Latitude
Longitude
8,900' to 8,999'
Baker Lake Peak (point 8,992)
8,992'
46.84601 N
114.27159 W
Castle Crag
8,984'
46.33081 N
114.37070 W
West Camas Peak (point 8934)
8,934'
46.16494 N
114.32558 W
Canyon Lake - West (point 8922)
8,922'
45.85923 N
114.44761 W
Camas Peak (point 8905)
8,905'
46.16327 N
114.31674 W
8,800' to 8,899'
Gash Point
8,886'
46.43347 N
114.31955 W
Ward Mountain - West (point 8874)
8,874'
46.17367 N
114.31518 W
Pyramid Buttes
8,869'
46.62829 N
114.25799 W
Disappointment Peak (point 8865)
8,865'
46.51202 N
114.28564 W
Bass Peak
8,855'
46.57783 N
114.31749 W
You may have noticed that for the two section headers I used < th > instead of < td >. Did you remember that < th > automatically centers the cell's contents and makes them bold? Of course it’s okay to use the < td > tag, I just find this way a bit more elegant. Comparing the two methods below (which give the same results), which do you like?
< th colspan=4 > 8,900' to 8,999' < /th > < td colspan=4 align=center > < b > 8,900' to 8,999' < /b > < /td >
Spanning Mutiple Rows
El Capitan of the Bitterroots
There are also times when we want a cell to span more than one row. Just recently, a friend of mine, Mtn Ear, made a list of peaks in Glacier National Park with summits over 9,000’ and at least 400’ of prominence. When he ranked the summits in descending order by elevation, it turned out that in a couple of cases 2 summits had the same height.
I’ve used a section of his table to demonstrate how to make a cell span 2 rows, in this case for 2 summits with elevations of 9,430'.
Another attribute of < td > and < th > , rowspan is used like...
< td rowspan=n >
Where n is an integer representing the number of rows you wish the row to span.
Here is the HTML required to display a section of the Glacier Summits list.
< /table > - end table
Here is the resulting table.
Rank
Summit Name
Elevation
Latitude
Longitude
UTM Zone
East UTM
North UTM
22
Point 9448
9,448'
48.87847 N
113.77199 W
12
02 96 762
54 17 426
23
Point 9430 - West
9,430'
48.92500 N
114.19983 W
11
07 03 560
54 23 315
Point 9430 - East
9,430'
48.93119 N
114.22075 W
11
07 05 129
54 22 683
25
Chapman Peak
9,406'
48.96280 N
114.02298 W
11
07 17 908
54 27 371
26
Vulture Peak -South (Point 9390)
9,390'
48.82145 N
114.02989 W
11
07 18 013
54 11 646
More Border Control
Longs Peak Sunrise
It’s time to return to our borders as I suggested we would. First let’s make it wider. We do that by assigning a number to the attribute, border. Like this...
< table border=n >
Where n is an integer representing how wide we want the border to be.
We’ll use a small table to demonstrate some of the things we can do with borders. First we’ll widen the border.
< table border=8 cellspacing=2 cellpadding=4 > - define table and set border width
< ! -- first row of table -- >
< tr >
< td > Upper Left < /td >
< td > Upper Right < /td >
< /tr >
< ! -- second row of table -- >
< tr >
< td > Middle Left < /td >
< td > Middle Right < /td >
< /tr >
< ! -- third row of table -- >
< tr >
< td > Lower Left < /td >
< td > Lower Right < /td >
< /tr >
< /table > - end table
Here's our new table.
Upper Left
Upper Right
Middle Left
Middle Right
Lower Left
Lower Right
Now it’s time to add a little color to our table. The attribute of the HTML table tag used most often for setting colors is bordercolor. It allows us to set the border around our tables to the color of our choice. The forms of the attribute are...
< table bordercolor=#nnnnnn > or < table bordercolor=colorname >
Where #nnnnnn is a number in hexadecimal notation and colorname is the name of a color. In most cases I prefer using a colorname. My reasons are, most visual browsers recognize an extensive list of color names, and if I say, “Color #FF00FF”, few will know what I’m referring to, but if I say, “Magenta”, most will. The few times I use a number reference for a color is when I need one so esoteric it doesn’t appear on the cross-browser color list.
Hint – There is a very good list of cross-browser colors available on the web at: W3Schools
Let's make our border blue.
< table border=8 cellspacing=2 cellpadding=4 bordercolor=blue > - define table and set border color
< ! -- first row of table -- >
< tr >
< td > Upper Left < /td >
< td > Upper Right < /td >
< /tr >
< ! -- second row of table -- >
< tr >
< td > Middle Left < /td >
< td > Middle Right < /td >
< /tr >
< ! -- third row of table -- >
< tr >
< td > Lower Left < /td >
< td > Lower Right < /td >
< /tr >
< /table > - end table
Finally, a table with some color!
Upper Left
Upper Right
Middle Left
Middle Right
Lower Left
Lower Right
Visual browsers, which covers just about everything in use these days, have the ability to give the borders around tables (and cells) a 3-D appearance. They do this by making the left and top borders light and the right and bottom borders dark – it gives the appearance of a light source in the upper left corner.
Some browsers do this automatically. If the HTML calls for a blue border, those browsers keep the right and bottom borders blue and make the left and top borders light blue. Unfortunately, one of the most popular browsers in use, Microsoft’s, doesn’t do this. It simply makes the entire border blue, thereby losing the 3-D effect. So, if you want everyone to see the 3-D effect on your tables, you have to include two additional border color attributes. They are, bordercolordark and bordercolorlight. If you want every browser to display your table with a 3-D border, you must use all 3 attributes together. If you don't care, just use bordercolor.
A side note here... If you're using Microsoft's browser, you probably noticed that when we made the table's border wider it automatically gave the border a 3-D appearance. But when we applied color using bordercolor the 3-D effect was lost. Go figure!
The form of these 3 color attributes is similar...
< table bordercolor=#nnnnnn > or < table bordercolor=colorname > < table bordercolorlight=#nnnnnn > or < table bordercolorlight=colorname > < table bordercolordark=#nnnnnn > or < table bordercolordark=colorname >
Where #nnnnnn is a number in hexadecimal notation and colorname is the name of a color. You know which I prefer.
< ! -- define table, set border color, and force 3-D effect for most browsers -- > < table border=8 cellspacing=2 cellpadding=4 bordercolor=blue bordercolorlight=lightblue bordercolordark=blue >
< ! -- first row of table -- >
< tr >
< td > Upper Left < /td >
< td > Upper Right < /td >
< /tr >
< ! -- second row of table -- >
< tr >
< td > Middle Left < /td >
< td > Middle Right < /td >
< /tr >
< ! -- third row of table -- >
< tr >
< td > Lower Left < /td >
< td > Lower Right < /td >
< /tr >
< /table > - end table
This table will have a 3-D color border when displayed by most visual-type browsers.
Upper Left
Upper Right
Middle Left
Middle Right
Lower Left
Lower Right
Even More Color
There is an attribute which we can use to apply background color to entire tables, whole rows, or just one cell at a time. These are the forms bgcolor takes…
< table bgcolor=#nnnnnn > or < table bgcolor=colorname >
< tr bgcolor=#nnnnnn > or < tr bgcolor=colorname >
< td bgcolor=#nnnnnn > or < td bgcolor=colorname >
< th bgcolor=#nnnnnn > or < th bgcolor=colorname >
By now you know what #nnnnnn and colorname mean, don’t you?
Using our example table, we’ll begin by applying color to the entire table.
< ! -- define table, set border color, force 3-D effect for most browsers & set background color -- > < table border=8 cellspacing=2 cellpadding=4 bordercolor=blue bordercolorlight=lightblue bordercolordark=blue bgcolor=antiquewhite >
< ! -- first row of table -- >
< tr >
< td > Upper Left < /td >
< td > Upper Right < /td >
< /tr >
< ! -- second row of table -- >
< tr >
< td > Middle Left < /td >
< td > Middle Right < /td >
< /tr >
< ! -- third row of table -- >
< tr >
< td > Lower Left < /td >
< td > Lower Right < /td >
< /tr >
< /table > - end table
Our table now has an antiquewhite background.
Upper Left
Upper Right
Middle Left
Middle Right
Lower Left
Lower Right
Before we do anything else, let's expand the size of our table by adding another column. Bear with me. I have a reason.
< ! -- define table, set border color, force 3-D effect for most browsers & set background color -- > < table border=8 cellspacing=2 cellpadding=4 bordercolor=blue bordercolorlight=lightblue bordercolordark=blue bgcolor=antiquewhite >
< ! -- first row of table -- >
< tr >
< td > Upper Left < /td >
< td > Upper Middle < /td > - add new column
< td > Upper Right < /td >
< /tr >
< ! -- second row of table -- >
< tr >
< td > Middle Left < /td >
< td align=center > Middle < /td > - add new column and center contents
< td > Middle Right < /td >
< /tr >
< ! -- third row of table -- >
< tr >
< td > Lower Left < /td >
< td > Lower Middle < /td > - add new column
< td > Lower Right < /td >
< /tr >
< /table > - end table
A new 3-column table.
Upper Left
Upper Middle
Upper Right
Middle Left
Middle
Middle Right
Lower Left
Lower Middle
Lower Right
Now, we'll use bgcolor to set the background color of an entire row.
< ! -- define table, set border color, force 3-D effect for most browsers & set background color -- > < table border=8 cellspacing=2 cellpadding=4 bordercolor=blue bordercolorlight=lightblue bordercolordark=blue bgcolor=antiquewhite >
< ! -- first row of table -- >
< tr bgcolor=lightgreen > - set row background color
< td > Upper Left < /td >
< td > Upper Middle < /td >
< td > Upper Right < /td >
< /tr >
< ! -- second row of table -- >
< tr >
< td > Middle Left < /td >
< td align=center > Middle < /td >
< td > Middle Right < /td >
< /tr >
< ! -- third row of table -- >
< tr >
< td > Lower Left < /td >
< td > Lower Middle < /td >
< td > Lower Right < /td >
< /tr >
< /table > - end table
Notice that our top row is now lightgreen and that the background of the table has remained antiquewhite. Even the background between cells is antiquewhite. This also shows that bgcolor when used as an attribute of < tr > will override its use with < table >.
Upper Left
Upper Middle
Upper Right
Middle Left
Middle
Middle Right
Lower Left
Lower Middle
Lower Right
We can prove that using the attribute bgcolor with < td > will override its use with < tr > by doing the following.
< ! -- define table, set border color, force 3-D effect for most browsers & set background color -- > < table border=8 cellspacing=2 cellpadding=4 bordercolor=blue bordercolorlight=lightblue bordercolordark=blue bgcolor=antiquewhite >
< ! -- first row of table -- >
< tr bgcolor=lightgreen > - set row background color
< td > Upper Left < /td >
< td bgcolor=pink > Upper Middle < /td > - set cell background color
< td > Upper Right < /td >
< /tr >
< ! -- second row of table -- >
< tr >
< td > Middle Left < /td >
< td bgcolor=pink align=center > Middle < /td > - set cell background color
< td > Middle Right < /td >
< /tr >
< ! -- third row of table -- >
< tr bgcolor=lightgreen > - set row background color
< td > Lower Left < /td >
< td bgcolor=pink > Lower Middle < /td > - set cell background color
< td > Lower Right < /td >
< /tr >
< /table > - end table
Upper Left
Upper Middle
Upper Right
Middle Left
Middle
Middle Right
Lower Left
Lower Middle
Lower Right
See how the background color we set for the middle column of cells overrode the color we set for the top and bottom rows in addition to overriding the color we had set for table background? Although interesting, this may never have any bearing in any table you design, but then again...
Table Captions
Baker Point
One thing I like to do is add captions to my tables. This is especially true when I refer to the tables as Figure 1, Figure 2, etc in the accompanying text.
The < caption > tag should appear after the < table > tag and before any other tag used to describe your table. Its form is...
< caption align=placement > text of caption < /captions >
Where placement is usually top or bottom. Left or right also work in some browsers, but the display output is so iffy, I don’t recommend their use. We’ll apply it to our table…
< ! -- define table, set border color, force 3-D effect for most browsers, set background color & use a caption -- > < table border=8 cellspacing=2 cellpadding=4 bordercolor=blue bordercolorlight=lightblue bordercolordark=blue bgcolor=antiquewhite >
< caption align=bottom > Example Table < /caption > - give the table a caption
< ! -- first row of table -- >
< tr bgcolor=lightgreen > - set row background color
< td > Upper Left < /td >
< td bgcolor=pink > Upper Middle < /td > - set cell background color
< td > Upper Right < /td >
< /tr >
< ! -- second row of table -- >
< tr >
< td > Middle Left < /td >
< td bgcolor=pink align=center > Middle < /td > - set cell background color
< td > Middle Right < /td >
< /tr >
< ! -- third row of table -- >
< tr bgcolor=lightgreen > - set row background color
< td > Lower Left < /td >
< td bgcolor=pink > Lower Middle < /td > - set cell background color
< td > Lower Right < /td >
< /tr >
< /table > - end table
Example Table
Upper Left
Upper Middle
Upper Right
Middle Left
Middle
Middle Right
Lower Left
Lower Middle
Lower Right
Table Alignment
Devil's Tower
There is one more thing you are likely to want to do with your tables and that is have control over their placement on the page. Surely you’ve noticed that all the example tables above have been centered on the screen. I did that to make them stand out from the text. However, there are times when you want accompanying text to flow around your tables. You do that by placing them to either the right or the left of the screen.
The attribute to table placement is align and its form is...
table align=placement
Where placement can be right, left, or center.
Here is the HTML to place our example table on the right side of the screen and the table placed accordingly beside the text.
< ! -- define table, set border color, force 3-D effect for most browsers, set background color & use a caption -- > < table border=8 cellspacing=2 cellpadding=4 bordercolor=blue bordercolorlight=lightblue bordercolordark=blue bgcolor=antiquewhite
align=right > - place table on right edge of screen
< caption align=bottom > Example Table < /caption > - give the table a caption
< ! -- first row of table -- >
< tr bgcolor=lightgreen > - set row background color
< td > Upper Left < /td >
< td bgcolor=pink > Upper Middle < /td > - set cell background color
< td > Upper Right < /td >
< /tr >
< ! -- second row of table -- >
< tr >
< td > Middle Left < /td >
< td bgcolor=pink align=center > Middle < /td > - set cell background color
< td > Middle Right < /td >
< /tr >
Example Table
Upper Left
Upper Middle
Upper Right
Middle Left
Middle
Middle Right
Lower Left
Lower Middle
Lower Right
< ! -- third row of table -- >
< tr bgcolor=lightgreen > - set row background color
< td > Lower Left < /td >
< td bgcolor=pink > Lower Middle < /td > - set cell background color
< td > Lower Right < /td >
< /tr >
< /table > - end table
Summary
Well, that covers some of the basics for designing tables to use on SummitPost pages. There are many uses for tables, one of which is displaying pictures. If that is of interest, have a look at this article about Pictures in Tables.
If you're interested in learning even more or would like access to some on-line reference information, I strongly suggest you try the HTML Tutorials or W3Schools.
Once you’ve played with tables for a while you may discovery you qualify to be what my wife claims I am. To find out, watch this Video.
HINT - (suggested byMOCKBA andnatreb) tables tend to overlap images inserted ahead of them by the SummitPost page editor's "insert image" function.
So if you are using inline images, a safe bet is to include < br clear=all > instead of the usual carriage return (this gives the browser an instruction to make sure that the next element - such as your table - is displayed low enough to clear the elements above it on all sides).
Also < noformat > and < /noformat > should be used before and after all tables; otherwise you're likely to have an enormous number of blank lines before and after your table.
I’ll leave you with one last table and this time I'm not going to supply you with the HTML used to display it. I only used one attribute in its design which wasn't covered in this article, and you should be able to figure out what that was with very little effort. I hope you find this table useful.
Good luck with your table settings!
A few of the HTML basics for designing tables
Tag
Attributes
Values
Form
< table >
align
placement1
< table align = placement ... >
border
n2
< table border = n ... >
bordercolor
colorname3
< table bordercolor colorname ... >
bordercolorlight
colorname
< table bordercolorlight colorname ... >
bordercolordark
colorname
< table bordercolordark colorname ... >
bgcolor
colorname
< table bgcolor colorname ... >
cellpadding
n4
< table cellpadding = n ... >
cellspacing
n5
< table cellspacing = n ... >
< tr >
align
placement6
< tr align = placement ... >
bgcolor
colorname
< td bgcolor = colorname ... >
< th >
align
placement
< th align = placement ... >
bgcolor
colorname
< th bgcolor colorname ... >
colspan
n7
< th colspan = n ... >
rowspan
n8
< th rowspan = n ... >
< td >
align
placement
< td align = placement ... >
bgcolor
colorname
< td bgcolor colorname ... >
colspan
n
< td colspan = n ... >
rowspan
n
< td rowspan = n ... >
< caption >
align
placement9
< caption align ... > text < /caption >
Footnotes
1 - placement may be left - center - right (left is the default)
2 - n is an integer, usually from 1 to 10 (2 is the default)
3 - colorname may be either a cross-browser recognized color or expressed in hexidecimal using the form #nnnnnn
4 - n is an integer > 1 (1 is the default)
5 - n is an integer > 1 (2 is the default)
6 - placement may be left - center - right (center is the default)
7 - colspan is an integer > 1
8 - rowspan is an integer > 1
9 - placement may be top or bottom (top is the default)
for attributes like cellpadding, it's a good idea to specify which units you intend to use (typically pixels or typographic "points"), otherwise different browsers will make differing assumptions.
Also, it's a good habit to place attribute values in quotes, even though it's not really necessary in the examples given.
Thus border="10px" is better than border=10
Michael Hoyt - Mar 14, 2007 9:39 pm - Hasn't voted
Re: units
When I began this article, I included the use of "quotes." But while testing I discovered that the browser I normally use, Mozilla Firefox, has a tendency to get confused when quotes are included with a few of the attribute values. Thus, I rewrote the article with no mention of them.
Next time I'm doing some testing I'll PM you with a list of the offending attributes.
Where was this last week? I've been reworking the Worth Another Look custom object for the past week (it's still in work, BTW). This excellent article, and the one on pictures in tables, address all the issues with which I have been struggling as I rework that page to better showcase the work of some of SP's finest photographers. Thanks! --mark d.
Michael Hoyt - Mar 10, 2007 11:47 pm - Hasn't voted
Re: Excellent!
I'm happy you're finding it useful. It validates my reason for writing it.
From somebody who is just beginning to dabble in HTML, I found this article to be very informative and useful. Thanks for taking the time to write it up!
This article in combination with your "Oh My" article cover the code very nicely and completely. They are both very well written and easy to read!
Congratulations, and well done!
Thanks;
Tim
Michael Hoyt - Mar 11, 2007 11:00 pm - Hasn't voted
Re: Mike;
Thanks Tim,
Some day I hope to know as much about HTML as you do about climbing - I'll keep working with that as my goal.
then some special attention may be needed for the tables further down the page.
Basically I found that tables tend to overlap images inserted ahead of them by the SP page editor's "insert image" function.
So if you are using inline images, a safe bet is to include <BR CLEAR=ALL> instead of the usual carriage return (this gives the browser an instruction to make sure that the next element - such as your table - is displayed low enough to clear the elements above it on all sides).
Also <NOFORMAT> and </NOFORMAT> may be useful flanking tags for your table whenever you suspect that SP's own formatting mechanisms may overdo the job (your table is probably already formatted to perfection, right ;) ? )
This tag is practically mandatory when using tables on SP. If you do not include it, any line breaks within the table (and there should be many, lest your table be incomprehensible when you try to modify it later) will appear as blank lines below the table, so you'll end up with big gaps on your page.
Michael Hoyt - Mar 14, 2007 9:33 pm - Hasn't voted
Re: Nice tutorial, but if you use SP inline images
Thanks for the reminders. I added your suggestions as a HINT in the Summary section of the article. Thanks again.
Actually to say the truth, I don't have any text in my SP HTML tables ever.
I only use tables to format pictures in horizontal rows for TRs, and in HTML it is just a one-liner without any line breaks. This said, it is still imperative to sandwich the stuff between NOFORMAT tags ... the line break situation isn't the only time when it saves you from surprises :)
Finally got around to reading this tutorial! Just what I was looking for! Now I just need to think of another list to try it out... Thanks for your efforts!
A great tutorial. First try and it worked great. Gave me such a good understanding that I was able to intuitively try some things you didn't mention and it still worked. Thanks now I'm addicted
The above post on how to make lists did not work at the html was turned into a list. If you highlight the list and right click on it, then select 'view source' you can see how it was done.
Children refers to the set of objects that logically fall under a given object. For example, the
Aconcagua mountain page is a child of the 'Aconcagua Group' and the 'Seven Summits.' The
Aconcagua mountain itself has many routes, photos, and trip reports as children.
Page Type:
1 Articles
Comments
Post a Comment