adv banner
Transparent IFrames
by Lindsay Coome
Vertical Pop-Up Menu
by DikkeDunne
Iframes Basics
by Michael Aldworth
Image Maps
by Demonslay
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Table Examples
rss

Table Examples

Author: netscape More by this author
Browse Pages: << <  1  2

Added: Sept 26, 2005 Rating:  Average Rating: 3.86 Votes: 7 Position: 12756 of 12756Average Rating: 3.86 Votes: 7 Position: 12756 of 12756Average Rating: 3.86 Votes: 7 Position: 12756 of 12756Average Rating: 3.86 Votes: 7 Position: 12756 of 12756Average Rating: 3.86 Votes: 7 Position: 12756 of 12756 Level: Beginner Software:  DreamweaverGoLiveFrontPage

Adjusting Margins and Borders

A Table Without Borders

Item 1 Item 2 Item 3
Item 4 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>

Aligment, Captions and Subtables

Demonstrations 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

1 2 3
A B
C D
4 5 6

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

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>
I hope this came in useful!


print this page tell a friend subscribe to newsletter subscribe to rss
Rate this Material: Bad 1 2 3 4 5 Excellent
Browse Pages: << <  1  2

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Table Examples"