Welcome to SP!  -
Setting Tables Using HTML
Article
 
Children 

Setting Tables Using HTML

  Featured on the Front Page
Setting Tables Using HTML

Page Type: Article

Object Title: Setting Tables Using HTML

 

Page By: thephotohiker

Created/Edited: Mar 9, 2007 / Nov 2, 2010

Object ID: 276346

Hits: 8263 

Page Score: 96.25%  - 58 Votes 

Vote: Log in to vote

 

 




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 Cirque
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

 
Interesting Tree
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
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 >

< ! –- fourth row of summit information -- >
< tr >
< td > Boulder Peak < /td >
< td > 9,804' < /td >
< td > 45.84721 N < /td >
< td > 114.34191 W < /td >
< /tr >

< ! –- fifth row of summit information -- >
< tr >
< td > Trapper Peak - North< /td >
< td > 9,801' < /td >
< td > 45.90064 N < /t >
< td > 114.28955 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
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
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

 
Red Paint Brush
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
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 >

< ! –- fifth row of summit information -- >
< tr >
< td > Camas Peak (point 8905) < /td >
< td align=right > 8,905' < /td >
< td > 46.16327 N < /td >
< td > 114.31674 W < /td >
< /tr >

< ! –- second section header -- >
< tr >
- begin section row
< th colspan=4 > 8,800' to 8,899' < /th >
- span 4 columns
< /tr >
- end section row

< ! –- sixth row of summit information -- >
< tr >
< td > Gash Point < td >
< td align=right > 8,886' < /td >
< td > 46.43347 N < /td >
< td > 114.31955 W < /td >
< /tr >

< ! –- seventh row of summit information -- >
< tr >
< td > Ward Mountain - West (point 8874) < /td >
< td align=right > 8,874' < /td >
< td > 46.17367 N < /td >
< td > 114.31518 W < /td >
< /tr >

< ! –- eighth row of summit information -- >
< tr >
< td > Pyramid Buttes < /td >
< td align=right > 8,869' < /td >
< td > 46.62829 N < /td >
< td > 114.25799 W < /td >
< /tr >

< ! –- nineth row of summit information -- >
< tr >
< td > Disappointment Peak (point 8865) < /td >
< td align=right > 8,865' < /td >
< td > 46.51202 N < /td >
< td > 114.28564 W < /td >
< /tr >

< ! –- tenth row of summit information -- >
< tr >
< td > Bass Peak < /td >
< td align=right > 8,855' < /td >
< td > 46.57783 N < /td >
< td > 114.31749 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

 
East View of El Capitan
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 border cellspacing=1 cellpadding=2 > - define table

< ! -- Column Labels -- >

< tr >
< th > Rank < /th >
< th > Summit Name < /th >
< th > Elevation < /th >
< th > Latitude < /th >
< th > Longitude < /th >
< th > UTM Zone < /th >
< th > East UTM < /th >
< th > North UTM < /th >
< /tr >


< ! -- 22nd summit info-- >

< tr >
< td align=right > 22 < /td >
- right justify the summit rankings
< td > Point 9448 < /td >
< td align=right > 9,448' < /td >
- right justify the elevations
< td > 48.87847 N < /td >
< td > 113.77199 W < /td >
< td align=center > 12 < /td >
- center number in wide column
< td > 02 < font size=4 > 96 < /font > 762 < /td >
- increase font size of center digits for easier reading
< td > 54 < font size=4 > 17 < /font > 426 < /td >
< /tr >


< ! -- 1st 23rd summit info-- >

< tr >
< td align=right rowspan=2 > 23 < /td >
- make cell span 2 rows
< td > Point 9430 - West < /td >
< td align=right > 9,430' < /td >
< td > 48.92500 N < /td >
< td > 114.19983 W < /td >
< td align=center > 11 < /td >
< td > 07 < font size=4 > 03 < /font > 560 < /td >
< td > 54 < font size=4 > 23 < /font > 315 < /td >
< /tr >


< ! -- 2nd 23rd summit info-- >

< tr >
< td > Point 9430 - East < /td >
< td align=right > 9,430' < /td >
< td > 48.93119 N < /td >
< td > 114.22075 W < /td >
< td align=center > 11 < /td >
< td > 07 < font size=4 > 05 < /font > 129 < /td >
< td > 54 < font size=4 > 22 < /font > 683 < /td >
< /tr >


< ! -- 25th summit info-- >

< tr >
< td align=right > 25 < /td >
< td > Chapman Peak < /td >
< td align=right > 9,406' < /td >
< td > 48.96280 N < /td >
< td > 114.02298 W < /td >
< td align=center > 11 < /td >
< td > 07 < font size=4 > 17 < /font > 908 < /td >
< td > 54 < font size=4 > 27 < /font > 371 < /td >
< /tr >


< ! -- 26th summit info-- >

< tr >
< td align=right > 26 < /td >
< td > Vulture Peak - South (Point 9390) < /td >
< td align=righ > 9,390' < /td >
< td > 48.82145 N < /td >
< td > 114.02989 W < /td >
< td align=center > 11 < /td >
< td > 07 < font size=4 > 18 < /font > 013 < /td >
< td > 54 < font size=4 > 11 < /font > 646 < /td >
< /tr >

< /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

 
Trail to Longs Peak
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

 
Rocks on Baker Point
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

 
Devils Tower
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 by MOCKBA and natreb) 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)

Images

Trapper Peaks CirqueSnow Covered TreesEast View of El CapitanRed Paint BrushDead SentinelsWolf SignBuddies
Interesting TreeRocks on Baker PointDevils TowerTrail to Longs PeakTable Setting

Comments


[ Post a Comment ]
Viewing: 1-17 of 17    

nartrebunits

nartreb

Hasn't voted

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
Posted Mar 9, 2007 3:24 pm

thephotohikerRe: units

thephotohiker

Hasn't voted

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.

Mike
Posted Mar 14, 2007 9:39 pm

Mark DoironExcellent!

Mark Doiron

Voted 10/10

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.
Posted Mar 10, 2007 2:30 pm

thephotohikerRe: Excellent!

thephotohiker

Hasn't voted

I'm happy you're finding it useful. It validates my reason for writing it.

Mike
Posted Mar 10, 2007 11:47 pm

weeds19Great Help!

weeds19

Voted 10/10

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!
Posted Mar 10, 2007 6:05 pm

T SharpMike;

T Sharp

Voted 10/10

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
Posted Mar 11, 2007 10:30 pm

thephotohikerRe: Mike;

thephotohiker

Hasn't voted

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.

Mike
Posted Mar 11, 2007 11:00 pm

Arthur Digbeevery helpful!

Arthur Digbee

Voted 10/10

Also well organized, slowly adding complexity. Thanks!
Posted Mar 13, 2007 3:58 pm

Dmitry PrussNice tutorial, but if you use SP inline images

Dmitry Pruss

Voted 10/10

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 ;) ? )
Posted Mar 14, 2007 8:32 pm

nartrebNOFORMAT

nartreb

Hasn't voted

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.
Posted Mar 14, 2007 8:55 pm

thephotohikerRe: Nice tutorial, but if you use SP inline images

thephotohiker

Hasn't voted

Thanks for the reminders. I added your suggestions as a HINT in the Summary section of the article. Thanks again.

Posted Mar 14, 2007 9:33 pm

Dmitry PrussRe: <NOFORMAT> not only for line breaks

Dmitry Pruss

Voted 10/10

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 :)
Posted Mar 15, 2007 7:48 pm

cp0915Amazing!

cp0915

Voted 10/10

Good job. I'm f'n lost.
Posted Mar 20, 2007 8:03 pm

mtn earPerfect!

mtn ear

Voted 10/10

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!
Posted Mar 22, 2007 3:01 am

johnmLuvin HTML now baby!

johnm

Voted 10/10

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
Posted Jun 22, 2007 12:39 am

D-boGood Resource!

D-bo

Hasn't voted

This greatly enhanced the table I just put up on my profile page.
Posted Feb 11, 2009 9:35 pm

laurencereadingOpps

Hasn't voted

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.
Posted Dec 27, 2010 12:11 pm

Viewing: 1-17 of 17