Sambuchi.net - Frames

This is some simple HTML code to wip up some quick frames for a webpage.

THE TABLE SAMPLER

This is intended to be a tutorial by example of Tables. This covers most of the new tags in tables, though it doesn't necessarily show some of the really creative capabilities available in tables.

A BASIC 3X2 TABLE

A	B	C
D	E	F


<TABLE BORDER>
	<TR>

		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>
	<TR>

		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>
</TABLE>

TWO DEMONSTRATIONS OF ROWSPAN

Item 1	Item 2	Item 3
Item 4	Item 2	Item 5


<TABLE BORDER>
	<TR>
		<TD>Item 1</TD>
		<TD ROWSPAN=2>Item 2</TD>

		<TD>Item 3</TD>
	</TR>
	<TR>
		<TD>Item 4</TD> <TD>Item 5</TD>

	</TR>
</TABLE>

Item 1	Item 2	Item 3	Item 4
Item 1	Item 5	Item 6	Item 7


<TABLE BORDER>

	<TR>
		<TD ROWSPAN=2>Item 1</TD>
	    	<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>

	</TR>
	<TR>
		<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>

	</TR>
</TABLE>

DEMONSTRATION OF COLSPAN

Item 1	Item 2
Item 3	Item 4	Item 5


<TABLE BORDER>
	<TR>
		<TD>Item 1</TD>
		<TD COLSPAN=2>Item 2</TD>

	</TR>
	<TR>
		<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>

	</TR>
</TABLE>

DEMONSTRATION OF HEADERS, <TH>

Head1	Head2	Head3
A	B	C
D	E	F


<TABLE BORDER>
	<TR>
		<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>

	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>

	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>

	</TR>
</TABLE>

DEMONSTRATION OF COLSPAN AND HEADERS,

Head1		Head2
A	B	C	D
E	F	G	H


<TABLE BORDER>
	<TR>
		<TH COLSPAN=2>Head1</TH>
	    	<TH COLSPAN=2>Head2</TH>

	</TR>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> 
	</TR>

	<TR>	
		<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> 
	</TR>

</TABLE>

DEMONSTRATION OF MULTIPLE HEADERS, COLSPAN

Head1		Head2
Head 3	Head 4	Head 5	Head 6
A	B	C	D
E	F	G	H


<TABLE BORDER>
	<TR>

		<TH COLSPAN=2>Head1</TH>
		<TH COLSPAN=2>Head2</TH>
	</TR>
	<TR>
		<TH>Head 3</TH> <TH>Head 4</TH> 
		<TH>Head 5</TH> <TH>Head 6</TH> 
	</TR>

	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> 
	</TR>

	<TR>
		<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> 
	</TR>

</TABLE>

DEMONSTRATION OF SIDE HEADERS

Head1	Item 1	Item 2	Item 3
Head2	Item 4	Item 5	Item 6
Head3	Item 7	Item 8	Item 9


<TABLE BORDER>
	<TR><TH>Head1</TH>
		<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>

	<TR><TH>Head2</TH>
		<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>

	<TR><TH>Head3</TH>
		<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>

</TABLE>

DEMONSTRATION OF SIDE HEADERS, ROWSPAN

Head1	Item 1	Item 2	Item 3	Item 4
Head1	Item 5	Item 6	Item 7	Item 8
Head2	Item 9	Item 10	Item 3	Item 11


<TABLE BORDER>
	<TR><TH ROWSPAN=2>Head1</TH>
	    <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>

	</TR>
	<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item 8</TD>

	</TR>
	<TR><TH>Head2</TH>
	    <TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item 11</TD>

	</TR>
</TABLE>

CLEVER USES OF ROWSPAN/COLSPAN

A	1	2
	3	4
C	D


<TABLE BORDER>
	<TR>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
		<TD>1</TD>

		<TD>2</TD>
	</TR>
	<TR>
		<TD>3</TD>
		<TD>4</TD>

	</TR>
	<TR>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
		<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
	</TR>

	<TR>
	</TR>
</TABLE>

ADJUSTING MARGINS AND BORDERS

A TABLE WITHOUT BORDERS

Item 1	Item 2	Item 3
Item 4	Item 2	Item 5


<TABLE>
	<TR>	<TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> 
	</TR>

	<TR>	<TD>Item 4</TD> <TD>Item 5</TD> 
	</TR>
</TABLE>

A TABLE WITH A BORDER OF 10

Item 1	Item 2
Item 3	Item 4


<TABLE BORDER=10>
	<TR>	<TD>Item 1</TD> <TD> Item 2</TD>

	</TR>
	<TR>	<TD>Item 3</TD> <TD>Item 4</TD> 
	</TR>
</TABLE>

CELLPADDING AND CELLSPACING

A	B	C
D	E	F


<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>

	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>

	</TR>
</TABLE>

A	B	C
D	E	F


<TABLE BORDER CELLPADDING=0 CELLSPACING=10>

	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>

	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>

</TABLE>

A	B	C
D	E	F


<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>

	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>

	</TR>
</TABLE>

A	B	C
D	E	F


<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>

	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>
	</TR>

	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>
	</TR>

</TABLE>

ALIGNMENT, CAPTIONS, AND SUBTABLES

DEMONSTRATION OF MULTIPLE LINES IN A TABLE

January	February	March
This is cell 1	Cell 2	Another cell, cell 3
Cell 4	and now this is cell 5	Cell 6


<TABLE BORDER>
	<TR>
		<TH>January</TH>

		<TH>February</TH>
		<TH>March</TH>
	</TR>
	<TR>
		<TD>This is cell 1</TD>

	    	<TD>Cell 2</TD>
	    	<TD>Another cell,<br> cell 3</TD>
	</TR>
	<TR>

		<TD>Cell 4</TD>
	    	<TD>and now this<br>is cell 5</TD>
	    	<TD>Cell 6</TD>

	</TR>
</TABLE>

ALIGN=LEFT|RIGHT|CENTER

can be applied to individual cells or whole ROWs

January	February	March
all aligned center	Cell 2	Another cell, cell 3
aligned right	aligned to center	default, aligned left


<TABLE BORDER>

	<TR>
	    <TH>January</TH>
	    <TH>February</TH>
	    <TH>March</TH>

	</TR>
	<TR ALIGN=center>
	    <TD>all aligned center</TD>
	    <TD>Cell 2</TD>
	    <TD>Another cell,<br> cell 3</TD>

	</TR>
	<TR>
	    <TD ALIGN=right>aligned right</TD>
	    <TD ALIGN=center>aligned to center</TD>
	    <TD>default,<br>aligned left</TD>

	</TR>
</TABLE>

VALIGN=TOP|BOTTOM|MIDDLE

can be applied to individual cells or whole ROWs

January	February	March
all aligned to top	and now this is cell 2	Cell 3
aligned to the top	aligned to the bottom	default alignment, center


<TABLE BORDER>
	<TR>
		<TH>January</TH>

		<TH>February</TH>
		<TH>March</TH>
	</TR>
	<TR VALIGN=top>
	    <TD>all aligned to top</TD>

	    <TD>and now this<br>is cell 2</TD>
	    <TD>Cell 3</TD>
	</TR>
	<TR>

	    <TD VALIGN=top>aligned to the top</TD>
	    <TD VALIGN=bottom>aligned to the bottom</TD>
	    <TD>default alignment,<br>center</TD>

	</TR>
</TABLE>

CAPTION=TOP|BOTTOM

A top CAPTION
January	February	March
This is cell 1	Cell 2	Another cell, cell 3


<TABLE BORDER>

<CAPTION ALIGN=top>A top CAPTION</CAPTION>
	<TR>
		<TH>January</TH>
		<TH>February</TH>

		<TH>March</TH>
	</TR>
	<TR>
		<TD>This is cell 1</TD>
		<TD>Cell 2</TD>

		<TD>Another cell,<br> cell 3</TD>
	</TR>
</TABLE>

A bottom CAPTION
January	February	March
This is cell 1	Cell 2	Another cell, cell 3


<TABLE BORDER>

<CAPTION ALIGN=bottom>A bottom CAPTION</CAPTION>
	<TR>
		<TH>January</TH>
		<TH>February</TH>

		<TH>March</TH>
	</TR>
	<TR>
		<TD>This is cell 1</TD>
		<TD>Cell 2</TD>

		<TD>Another cell,<br> cell 3</TD>
	</TR>
</TABLE>

NESTED TABLES: TABLE ABCD IS INSIDE TABLE 123456

A	B
C	D



<TABLE BORDER>
	<TR> <!-- ROW 1, TABLE 1 -->
		<TD>1</TD>
		<TD>2</TD>

		<TD>3
		<TABLE BORDER>
			<TR> <!-- ROW 1, TABLE 2 -->
				<TD>A</TD>
				<TD>B</TD>

			</TR>
			<TR> <!-- ROW 2, TABLE 2 -->
				<TD>C</TD>
				<TD>D</TD>

			</TR>
		</TABLE>
		</TD>
	</TR>
	<TR> <!-- ROW 2, TABLE 1 -->

		<TD>4</TD>
		<TD>5</TD>
		<TD>6</TD>
	</TR>

</TABLE>

TABLE WIDTHS

BASIC 50% WIDTH

Width=50%	Width=50%
3	4


<TABLE BORDER WIDTH="50%">
	<TR><TD>Width=50%</TD><TD>Width=50%</TD>

	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

Item width affects cell size	2
3	4


<TABLE BORDER WIDTH="50%">
	<TR><TD>Item width affects cell size</TD><TD>2</TD>
	</TR>
	<TR><TD>3</TD><TD>4</TD>

	</TR>
</TABLE>

WIDTH=100%	This is item 2
3	4


<TABLE BORDER WIDTH="100%">
	<TR><TD>WIDTH=100%</TD><TD>This is item 2</TD>
	</TR>

	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>

CENTERING A TABLE ON A PAGE

A	B	C
D	E	F


<CENTER>
<TABLE BORDER WIDTH="50%">
	<TR>
		<TD>A</TD> <TD>B</TD> <TD>C</TD>

	</TR>
	<TR>
		<TD>D</TD> <TD>E</TD> <TD>F</TD>

	</TR>
</TABLE>
</CENTER>

TABLE WIDTH AND NESTED TABLES

Item 1

Item 2

Item A

Item B

Item 4


<TABLE BORDER WIDTH="50%">
	<TR><TD>Item 1</TD><TD>Item 2</TD>
	</TR>

	<TR><TD>
	    <TABLE BORDER WIDTH=100%>
		<TR><TD>Item A</TD><TD>Item B</TD>
		</TR>

	    </TABLE>
	    </TD>
	    <TD>Item 4</TD>
	</TR>
</TABLE>

HEIGHT=15%

HEIGHT=15%	Item 2
3	4


<TABLE BORDER WIDTH="50%" HEIGHT="15%">
	<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>

	</TR>
	<TR><TD>3</TD><TD>4</TD>
	</TR>
</TABLE>


© 1999 Netscape, All Rights Reserved. Legal & Privacy Notices This site powered by Netscape SuiteSpot servers.