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.

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>

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>

The META tag can be used for many things. It’s used for giving info on a website, or for autmatically refreshing pages. All the META tags go between the HEAD statements, before or after the TITLE tags. There are several common META tags used, as outlined below:

---

<META http-equiv=”refresh” content=”#; url=http://www.zzz.com”>

# is the number of seconds to wait before it auto refreshes. It tells the browser to go to http://www.htmlcenter.com in that # of seconds. So if you had content=”4; url=”http://www.blah.com”

then the page it’s on would take four seconds to reload to www.blah.com.

---

<META name=”keywords” content=”keyword keyword2 keyword3″>

This tag tells search engines what keywords are present in your page, instead of just looking at the title of your page. Only a few engines support this tag, such as Altavista and Excite. Also, some of these engines have blockers that if you include too many of the same keywords it will disregard your page. content=”html meta center tutorials”

is an example of keywords that this page might use.

---

<META name=”description” content=”Enter a description here”>

This tag is used by search engines for their results pages. Without a proper meta description the search engine will generally pick up the first bit of content from the page. This might not be desirable because the first bit of content might be a menu or other navigation.

---

<META name=”generator” content=”The generator”>

This tag is outdated. Software applications use this to show the source code viewer what application was used to create the page.

---

<META name=”author” content=”author’s name”>

Display’s site authors name. Very rarely used today.

Image maps allow users to access different documents by clicking different areas in an image. You can implement image maps in two ways: by storing image map information on a server or by including image map information in your document. These areas are commonly referred to as hotspots.

If you store image map information on a server, you need a script or other service on the server to process click information. In your document, you mark the image as a “server-side” image map by using the ISMAP attribute in the IMG tag and enclosing the image in an A tag, as in the following example:

<A HREF=”jump.map”>
<IMG SRC=”sample.gif” ISMAP></A>

In this example, the image map information is in the file name JUMP.MAP. When the user clicks on the picture SAMPLE.GIF, the server receives the coordinates of the click, and can pick the appropriate destination for the click by checking the information in JUMP.MAP.

If you include image map information in your document, Internet Explorer processes the click information and picks the appropriate destination for the click. In your document, you mark the image as a “client-side” image map by using the USEMAP= attribute in the IMG tag, and you add image map information by using the MAP and AREA tags, as in the following example:

<MAP NAME=”map1″>

<AREA SHAPE=”RECT” COORDS=”0, 0, 16, 16″ HREF=”sample1.htm”>

<AREA SHAPE=”RECT” COORDS=”16, 0, 16, 16″ NOHREF>

<AREA SHAPE=”RECT” COORDS=”0, 16, 16, 16″ HREF=”sample2.htm”>

<AREA SHAPE=”RECT” COORDS=”16, 16, 16, 16″ HREF=”sample3.htm”>

</MAP>

<IMG BORDER=0 SRC=”map1.gif” USEMAP=”#map1″>

In this example, the image map defines four equal rectangular areas. One area has no corresponding destination, but the other three map to the SAMPLE1.HTM, SAMPLE2.HTM, and SAMPLE3.HTM files, respectively.

The AREA tag permits other shapes, such as circles and polygons. If two or more shapes overlap, Internet Explorer uses the first shape defined in the MAP tag to determine the destination. Any number of AREA can specify the same destination. This is useful if you want to map a complex shape to a single destination. If a portion of the image is not within a given shape, clicking in that portion has no effect.

HEAD | BODY | IMG | FONT | A


To start out with your basic HTML page, you need this standard structure. You should use this for every HTML page you create.

<HTML>
<HEAD>
<TITLE> </TITLE>
Any HEAD Content Here
</HEAD>
<BODY>
Any BODY Content Here
</BODY>
</HTML>

Now, lets examine each part of the HTML page.

 

HEAD

No element in the HEAD tag can be directly seen on the browser screen. Here’s where you put the <SCRIPT> tags, when working with JavaScript,<STYLE> tags when working with Style Sheets, and any <META> info. However, most basic pages won’t use these elements, so lets just skip to the <TITLE> tag. Enter your title within the title tags. So if you type “John Doe’s Page” in between the <TITLE> tags, then you’ll see John Doe’s Page in the bar at the top of browsers.

---

 

BODY

This is the main content area of any HTML page. What you’re reading right now is the content we created between the BODY tags. Here’s the breakdown of all the major tags you’d need to make a simple, good looking page.

Tag	Attributes	Definition
CENTER	None	Centers text
P	align=”right,center,left”	Skips a line between paragraphs. Also justifies paragraphs.
BR	None	Carriage Return
HR	size=”Pixel or Percent” width=”Pixel or Percent” noshade	Physical line dividing text.

---

 

Image Tag

<IMG src=”image.gif” width=”5″ height=”5″ alt=”Image!” border=”0″ align=”center”>
Explanation:
src: Path to image
width and height: Dimensions of image
alt: Alternative Text that loads up before image is loaded. Also text browsers use it for the image description.
border: Border around the image, in the color of the FONT color at the time.
align: where text aligns in comparision to the image.

---

 

Font Tag

Example: <FONT face=”Verdana” color=”#ff0000″ size=”2″></FONT>
Explanation:
face: Specify which font for the browser to use for display. Popular choices are Arial and Verdana. The user must have the font on their machine so make sure you select a commonly used font.
color: hex color that the text should be.
size: Size of the font. Range is from 1 (smallest) through 7 (largest).

Also:

<B> Bold </B>
<I> Italic </I>
<U> Underline </U>

---

 

Anchor Tag

Example: <A href=”somewhere.html” target=”_top”>Click</A>, or<A name=”here”>
Explanation:
href: Where the link is pointed to.
target: Used for frames mostly.
name: A place in the same page to go to. Add this tag for where you want the link to go, and <A href=”#nameofanchor”> for the actual link.

The most basic set of frames requires 3 .html documents: 1) The
Frameset Document 2) A Source Page 3) Another Source Page

Here is an example of this simple frameset, laid out in a very
common format: The Left Menu

	color=”#FFFFFF” face=”Arial” size=”-1″>index.html (_top)
		face=”Arial” size=”-1″>menu.html (Menu) Link Link Link Link		color=”#FFFFFF” face=”Arial” size=”-1″>main.html (Main) Stuff, stuff, stuff stuff, stuff, stuff

In this example, only the 2 Source pages will be visible to the
user, and the Menu Frame will remain onscreen while the Main frame is updated by the links
in the Menu. Lets look at the HTML source of each document to see how they work to achieve
this effect:

1. The Frameset - index.html (_top)

<html>

<head>

<frameset cols="30%,70%">

<frame src="menu.htm" name="Menu">

<frame src="main.htm" name="Main">

</frameset>

</head>

<noframes><a
href="main.htm">Click Here</a></noframes>

</html> 

All of the html tags in this example are required.
We will look at some optional frameset effects in the next chapter.

Now lets examine each tag individually:

<frameset cols="30%,70%">

Open Frameset creating Columns. Make the First Column 30% of the screen width, and the
second column 70%

<frame src="menu.html"
name="Menu">

For the First Column, display the contents of menu.html, and give this frame the name
"Menu"

<frame src="main.html"
name="Main">

For the First Column, display the contents of menu.html, and give this frame the name
"Menu"

</frameset>

Close Framesets

<noframes><a
href="menu.htm">Click Here</a></noframes>

Older Browsers and Search Engines sometimes have trouble with
frames. Adding a link to your menu page will make sure these users can get to your
content!

2. The Menu Frame - menu.html (Menu)

The source frames of any Frameset are normal html documents that you
can design in any way you like. The IMPORTANT thing to remember is that each of your links
will need a TARGET, which tells the link which frame it is to be opened in. If you do not
specify a target for your links, the link will open inside the current frame.

For our example, we will need to specify the target "Main"
in each link, so that the link gets displayed in the correct frame:

<a href="next.html" target="Main">Link color=”#FF0000″></a>

3. The Main Frame - main.html (Main)

This page can be anything you desire. As in the above example, you
may want to create a link which updates the Menu frame, while leaving the Main page
onscreen. Simply specify your target as "Menu":

<a href="menu2.html" target="Menu">Link color=”#FF0000″></a>

4. Important things to know about Frame Targets:

The Target of a Link must correspond to the name=""
of a frame created by the frameset document. Frame names/targets are case-sensitive, so be
sure you are consistent.

The frameset document is known as the parent of any
particular frame. There are some special target names you can use to "clear"
your frames - or break out of frames altogether. These names are _top and _parent.
In the above example, targeting either _top or _parent will remove the
frames completely and display the link in the full browser window.

Borderless Frames

One of the major things now in frame usage is borderless frames. To make borderless frames, just do these two simple things. Add framespacing=”0″ border=”0″ frameborder=”0″ into your <FRAMESET> tag. Then, add marginwidth=”0″ marginheight=”0″ into your <FRAME> tags. Thats it!

This tutorial looks at some the Tags available, and discusses the
behavior of each.

<frameset cols="x,x">
  <frameset rows="x,x">

Each occurrence of the <frameset> tag must specify either columns (cols) or rows to
be displayed. A <frameset> tag cannot contain BOTH cols AND Rows -
this effect is achieved by nesting frameset tags.

Columns or Rows can be specified in either pixel or percentage value: <frameset
cols="300,*"> or <frameset rows="25%,50%,25%">, and can
contain as many columns or rows as you wish. Each comma separated value ("X,")
represents a <frame src=""> which must be displayed. Therefore
<frameset rows="25%,*,100"> would represent a window framed into 3 areas,
20% on top, 100 pixels high on the bottom. Since we cannot know the height of the browser,
we cannot determine the value of the middle frame - the command  " *,"
tells the browser to expand this frame  to use the rest of the window.

<frameset> options:

frameborder="yes/no"
border=0 framespacing=0

These 3 frameborder controls should be used only to turn borders OFF. If you want to leave
the borders ON, don’t use anything. Browser manufacturers have dabbled with such controls as
framespacing and bordercolor, but these should never be used unless your site is on a
closed intranet. They are not well supported and your results can vary widely

<frame src="file.url"
name="name">

The <frame> tag is required for each "X," row or column specified in the
<frameset> tag. Each <frame> will require an initial page src="" to
display, and a unique name="FrameName" to target with hyperlinks from other
framed pages.

<frame> options:

scrolling="yes/no/auto"

Add this to your <frame> tag to control the
scrollbars for that frame. The default scrolling behavior for any unspecified frame is
auto, which is to say: "Only display scrollbars IF the content runs outside the
display area."

marginheight="15"
marginwidth="15"

You can control the margins for each frame with these
options. The default value in most browsers is roughly 15 pixels

noresize

IF you have frame borders visible, this option will "lock" them in place, and
remove the users ability to resize the framed areas.

</frameset>

Believe it or not, this tag causes plenty of problems for those who forget it. it is required
to close each instance of the <frameset> tag

<noframes> </noframes>

It is very important that your <frameset> documents contain <noframes>
content. You can insert custom content strictly for Older Browsers, but it is important
that you at LEAST include a link to your main menu page.

Now that we’ve learned the tags, lets create a more complex
example:

	color=”#FFFFFF” face=”Arial” size=”-1″>index.html (_top)
		color=”#FFFFFF” face=”Arial” size=”-1″>menu.html (Menu) Link Link Link Link		color=”#FFFFFF” face=”Arial” size=”-1″>main.html (Main) face=”Arial” size=”-1″>Stuff, stuff, stuff stuff, stuff, stuff
				color=”#FFFFFF” face=”Arial” size=”-1″>nested.htm (Nest)
					color=”#FFFFFF” face=”Arial” size=”-1″>sub-a.htm (subA)		color=”#FFFFFF” face=”Arial” size=”-1″>sub-b.htm (subB)	color=”#FFFFFF” face=”Arial” size=”-1″>
					color=”#FFFFFF” face=”Arial” size=”-1″>

In this example, we have four src="" documents,
and 4 Named Frames to Target. We have nested our frameset twice,  to combine rows and
columns - once with tag nesting, and once with document nesting.

<frameset cols="33%,*"> face=”Arial” size=”-1″>

    <frame
src="menu.htm">

    <frameset rows="60%*,*>

            <frame
src="main.htm" name="main">

            <frame
src="nested.htm" name="nest">

    </frameset>

</frameset>

 

Now lets examine each tag individually:

<frameset cols="30%,*"> face=”Arial” size=”-1″>

This tag defines 2 columns, one for the menu at 30%, and another for "*", or,
the remaining 70% of the screen area.

<frame src="menu.htm"
name="Menu">

For the First Column, display the contents of menu.html, and give this frame the name
"Menu"

<frameset rows="60%,*"> face=”Arial” size=”-1″>

Here we are defining a NEW frameset with 2 rows, which will display in the second column
created by the frameset above.

<frame src="main.htm"
name="Main">

For the top row of the second column, we insert our main page.

<frame src="nested.htm"
name="nested">

For the bottom row of the second column, we will include a new<frameset> document.
As we will see, this will create yet 2 more columns, to display in the bottom row.

</frameset></frameset face=”Arial” size=”-1″>>

Be sure to close each <frameset>

Nested.htm (Nest or _parent) face=”Arial” size=”-1″>

The source of nested.htm is simple enough:

<frameset cols="50%,50%" frameborder=no
border=0 framespacing=0>

<frame src="sub-a.htm" name="subA">

<frame src="sub-b.htm" name="subB">

</frameset>

 

Our final discussion involves dynamically changing the contents of more than one frame. As you have seen in the above example, two or more frames can be changed simply by targeting the _parent of a nested frameset document. This will not always suffice however, and you may find it easier to use the javascript method illustrated below:

<BODY onLoad=”parent.frameName.location=’http://domain.com/page.htm’ “>

Including this simple command in any document of your frameset, will cause the specified frame NAME to be updated with the specified URL. Simply put, you will change the First frame in your sequence with the normal href=”" target=”frameName” method, and that new document will cause the next frame in your sequence to load the appropriate page.