CSS Table Gallery

Last week I was looking for good examples of HTML table layouts. Not for the code, but for the style… the colors, the borders, etc. After some searching, I found a site from Chris Heilmann in the UK. He put together a really nice list of CSS styles for HTML tables. He links out to each of the styles so you can download the ones you like. But what really makes his gallery special is that you can click a style and the gallery table changes to that style so you can see a preview instantly.

Check it out here: http://icant.co.uk/csstablegallery/index.php

External Links: Same Window or New Window?

Back in the mid-to-late ’90s, the general rule was never to pop a window on an external link. During the early 2000s, my company decided on a policy that opened a new window on any external links but not for internal links. The reasoning was that we didn’t want users to lose their place when we pointed to an additional resource on a topic.

It seems like today we are back to the 90s regarding external linking. Blogs almost never open a new window and most websites also seem to stay in the same window when opening external websites.

What’s your take on opening new browser windows – yes or no? If yes, in what circumstances? If no, why not?

Creating a Header/Footer to be Used on all Pages

I referenced this in a post from a few months ago, but never bothered to expound on it. You cannot use cascading style sheets (CSS) to create headers, footers or menus that will be re-used on all of your pages. Instead, you have to use server-side includes (SSI).

There are a handful of ways to use SSI, and they are available in most all of the Web development languages used today. Although I think the use of repeating headers and footers is somewhat outdated, opting more for using templates that dynamically include your content, I’m going to try to teach you a few ways to include your headers, footers and/or menus on all of your pages.

The NY Times Hand Codes Their HTML

The NY Times Design Manager Khoi Vinh has been answering a variety of questions over the past week from readers. Today’s question was most interesting:

Q: Regardless of platform or browser, NYTimes.com looks the same. This is not an easy feat to accomplish because of inconsistencies between browsers and how they handle HTML and CSS. How do you do it and with which tools?

— Neil Mansilla

A: It’s our preference to use a text editor, like HomeSite, TextPad or TextMate, to “hand code” everything, rather than to use a wysiwyg (what you see is what you get) HTML and CSS authoring program, like Dreamweaver. We just find it yields better and faster results.

But really the browser-to-browser consistency that you see (and I have to admit, it’s far from perfect) is the result of a vigilant collaboration between many different groups — the visual designers and technologists in the design team that I lead, their counterparts in our technology staff, and the many, many detail-oriented people who come together to make the site a reality every hour of every day.

HTML Tables Tutorial

Here is a brief HTML table tutorial. It is important that before beginning this tutorial, you know the HTML basics. You know that <b> does not center something, but rather bolds that item. Ok so lets begin.


Tables are the lifeblood of HTML. They allow you to almost perfectly place text, images, and other media, exactly where you want it. You can make a table conform to the users screen width, or you can be rigid and make the table any number of pixels wide. The new standard is a 600 pixel wide table, since most people are using 640×480 resolution, they won’t have to scroll both horizontally and vertically.


There are really only three basic tags for a table. They are:
<table> = table tag
<tr> = table row
<td> = table data


Most important is that a <td> is always inside a <tr>, which is always inside a <table>.


A very basic table would look like this


<table>
<tr>
<td>
Hi Mom
</td>
</tr>
</table>


Now the fun begins when we start to add to the table. Remember when you were little and you would build playing card houses, that the most important thing was the foundation? Well the same applies to HTML Tables. By properly placing the

tag, with the right attributes you will build the solid foundation you need to make a great card house, oops I mean table.


I would like to make a 3 column, 3 row table so you can see a basic table, then we will add attributes to it, to flavor it up. So, lets get started!

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9


Here is the HTML code for the table above:

<table BORDER=1>

<TR><TD>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>

<TR><TD>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr>

<TR><TD>Cell 7</td><td>Cell 8</td><td>Cell 9</td></tr>

</table>



It is at this point I would like to remind you that most HTML tags require and en tag. This is especially important with table tags. One missing </td> and the table might not show up or could be skewed.



From here on, I will only print the HTML Code that changes. This will help you to see what has changed, and how it looks in both the HTML and on screen.



First HTML change in the table will be to remove the border. Change the border tag to read BORDER=0 and this is how the table looks:

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9



As you see, now there is no border. This is commonly referred to as Borderless Tables.


Next we will add some cellpadding to the table. This gives each cell some space to breathe. So add CELLSPACING=5 to the table tag.

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9


There are loads of different options for tables. There are Cellpadding, Cellspacing, border, align, valign, and many others.


Cellpadding – Space within the cells

Cellspacing – Space between the cells

Border – Puts a border around the cells and table

Align – aligns the content of the table (left, right, center)

Valign – vertically aligns the content (top, middle, bottom)




Align and Valign can be used in td,tr, and table tags. Cellpadding, Cellspacing and Border should only be used in the table tag.



Next we will look at colspan and rowspan. Rowspan allows you to stretch one cell to more than one cell.

Cell 1
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9



To accomplish this, you have to use the colspan attribute. Just add colspan=2 to the <td>, and bam!


Rowspan works similar.

Cell 1 Cell 2 Cell 3
Cell 5 Cell 6
Cell 8 Cell 9



To accomplish this, add ROWSPAN=3, to your <td> tag.


Here is a list of all table attributes, you should consider this your, “cheat sheet.”


WIDTH=”600″>
























































Table Attribute List


Define Table


<TABLE></TABLE>


 


Columns to Span


<TH COLSPAN=?>


 


Rows to Span


<TH ROWSPAN=?>


 


Desired Width


<TH WIDTH=?>


(in pixels)


Width Percent


<TH WIDTH=”%”>


(percentage of table)


Cell Color


<TH BGCOLOR=”#$$$$$$”>


 


Table Caption


<CAPTION></CAPTION>


 


Alignment


<CAPTION ALIGN=TOP|BOTTOM>


(above/below table)


Table Border


<TABLE BORDER=?></TABLE>


 


Cell Spacing


<TABLE CELLSPACING=?>


 


Cell Padding


<TABLE CELLPADDING=?>


 


Desired Width


<TABLE WIDTH=?>


(in pixels)


Width Percent


<TABLE WIDTH=”%”>


(percentage of page)


Table Row


<TR></TR>


 


Alignment


<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>


 


Table Cell


<TD></TD>


(must appear within table rows)


Alignment


<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>


 


No linebreaks


<TD NOWRAP>


 


Columns to Span


<TD COLSPAN=?>


 


Rows to Span


<TD ROWSPAN=?>


 


Desired Width


<TD WIDTH=?>


(in pixels)


Width Percent


<TD WIDTH=”%”>


(percentage of table)


Cell Color


<TD BGCOLOR=”#$$$$$$”>


 


Table Header


<TH></TH>


(same as data, except bold centered)


Alignment


<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>


 


No Linebreaks


<TH NOWRAP>


 

HTML Table Attributes

Tables in HTML pages are created by using multiple HTML tags with specific attributes defining table structure.
I have prepared HTML table attributes list, please feel free to use it as cheat sheet for crafting HTML tables and forms.

Table Attribute List

Define Table: <TABLE></TABLE>
Columns to Span: <TH COLSPAN=?>
Rows to Span: <TH ROWSPAN=?>
Desired Width: <TH WIDTH=?>(in pixels)
Width Percent: <TH WIDTH="%">(percentage of table)
Cell Color: <TH BGCOLOR="#$$$$$$">
Table Caption: <CAPTION></CAPTION>
Alignment: <CAPTION ALIGN=TOP|BOTTOM>(above/below table)
Table Border: <TABLE BORDER=?></TABLE>
Cell Spacing: <TABLE CELLSPACING=?>
Cell Padding: <TABLE CELLPADDING=?>
Desired Width: <TABLE WIDTH=?>(in pixels)
Width Percent: <TABLE WIDTH="%">(percentage of page)
Table Row: <TR></TR>
Alignment: <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>

Table Cell: <TD></TD>(must appear within table rows)
Alignment: <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>

No linebreaks: <TD NOWRAP>
Columns to Span: <TD COLSPAN=?>
Rows to Span: <TD ROWSPAN=?>
Desired Width: <TD WIDTH=?>
Width Percent: <TD WIDTH="%">(percentage of table)
Cell Color: <TD BGCOLOR="#$$$$$$">
Table Header: <TH></TH>(same as data, except bold centered)
Alignment: <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>

No Linebreaks: <TH NOWRAP>

I hope this was helpful. If you have any questions or suggestions leave them in the post comments section.

Pages: