Learning XHTML.. how do I make a box/table?

Discussion in 'Web Design & Coding' started by SwordWielder, Aug 31, 2003.

  1. SwordWielder

    SwordWielder Master of Swords VIP Member

    Joined:
    Feb 8, 2003
    Messages:
    375
    Likes Received:
    2
    Location:
    California
    I want to take 3 sections left box, center and right box all on one row with different data. And then another row with data below that that streches accross all 3 boxes:
    HTML:
     [                 ] [                         ] [                    ]
 [                                                                    ]
    That's the idea there. I'd like them to have a border too, not hidden I think.

    I am new to XHTML and want to know how to do this properly.
     
    SwordWielder, Aug 31, 2003
    #1

    1. Advertisements

  2. SwordWielder

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    The best way to do this is with CSS. Since your learning XHTML, I would learn CSS also. You use CSS to make everything look "pretty". XHTML is used to do most of the structuring, although you can do structuring with CSS too.

    Here's a basic template you should use if you coding in XHTML:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<title>Title</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 </head>
 <body>
 
 </body>
 </html>
    As for what you want, to do this, I would do it with CSS instead of tables. Using CSS it will render faster and you can do more things with CSS. If your just learning XHTML, I would suggest using the doctype "transitional". Strict restricts you from using a lot of features and forces you to use mostly CSS.

    This is valid CSS and XHTML:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<title>Title</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 	<style type="text/css">
 	body {
 		background-color: #FFF;
 		font-family: verdana;
 		color: #000;
 		font-size: 11px;
 	}
 	.cell1 {
 		background-color: navy;
  		border: thin solid #00FF00;
 		color: #FFF;
 	        position: absolute;
 		left: 10px;
 		top: 30px; 
 		width: 200px;
 	}    
 	.cell2 {
 		background-color: navy;
 		border: thin solid #00FF00;
 		color: #FFF;
 		position: absolute;
 		left: 30%;
 		top: 30px;
 		width: 200px;		
 	}
 	.cell3 {
 		background-color: navy;
 		border: thin solid #00FF00;
 		color: #FFF;
 		position: absolute;
 		left: 60%;
 		top: 30px;  
 		width: 200px;				
 	}
 	.bottcell {
 		border: thin solid #00FF00;
 		color: #FFF;
 		background-color: navy;
 	}
 	</style>
 </head>
 <body>
 <div align="center">Welcome</div>
 <br />
 <div class="cell1">here's the left cell
 <br />more stuff</div>
 <div class="cell2">here's the middle
 <br />more stuff</div>
 <div class="cell3">here's the right
 <br />more stuff</div>
 <br />
 <br />
 <div class="bottcell">here's the bottom</div>
 </body>
 </html>
    You will have to play around with the margin settings to get them to look the way you want. If you need help let us know.

    You can validate your code here. I make sure all of my pages are valid in XHTML. Everything on this domain is 100% XHTML compliant (there's other pages the public doesn't know about) except for the forums, which will change once vB3 is out.
     
    James, Aug 31, 2003
    #2

    1. Advertisements

  3. SwordWielder

    SwordWielder Master of Swords VIP Member

    Joined:
    Feb 8, 2003
    Messages:
    375
    Likes Received:
    2
    Location:
    California
    Thanks, I did a little playing around with it. It's starting to work out pretty good.
     
    SwordWielder, Sep 2, 2003
    #3
  4. SwordWielder

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    You could have used tables in XHTML to do it - but James is right, CSS is a must when doing XHTML - and you can put everything in an external sheet and call it into other pages on your website.

    More info here:

    http://www.w3schools.com
     
    S Walch, Sep 4, 2003
    #4
  5. SwordWielder

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    You COULD use tables, but tables are made for tubular data. Doing it with CSS is better and faster.
     
    James, Sep 4, 2003
    #5

    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.
Similar Threads

  1. Learning More

  2. gap between Table and Table Cell

  3. How to display user table contents!

  4. Absolute beginner's CBT for learning Windows?

  5. 'Select Table' dialogue box ?

  6. Sharing files between a WinTel box and a Linux box

  7. how make laptop hd slave in regular box?

  8. SOLVED How To Do A Array For A Listview Table

Loading...