how to not use tables

perkeyone

perkeyone

something clever
Reaction score
71
im trying to learn how to do stuff without tables but i really dont know where to begin
i know that i can use divs, spans, labels, lists, ect to accomplish anything a table can do
but im not sure where to use each type of element
and im not sure what css i would need to use

just as an example
what would be a non-table equivalent of this?
Code: 
<table>
<tr>
<th>head 1</th>
<td>data 1</td>
</tr>
<tr>
<th>head 2</th>
<td>data 2</td>
</tr>
</table>
 
Magentix

Magentix

if (OP.statement == false) postCount++;
Reaction score
107
Use tables for data, use block elements (divs) for layout...

So this is valid:
PHP: 
<table>
<thead>
<tr>
<th>Person</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
<td>911</td>
</tr>
<tr>
<td>Jill</td>
<td>112</td>
</tr>
</tbody>
</table>

However, using tables to layout your website is so 90ies it makes web designers' eyes bleed.

To style divs, read up on the following CSS topics:
- margin
- padding
- float and clear
- absolute vs relative

Wouldn't hurt to read up on the CSS box model to understand the difference between border-box (IE's horrible invention) and content-box, as well as padding vs margin.
 
tooltiperror

tooltiperror

Super Moderator
Reaction score
231
DIV's are simple, really. You should understand after one example.

Code: 
<html>
	<head>
		<style type="text/css">
			div.mydiv
			{
				background-color:red;
				width:300px;
				height:200px;
				padding:5px;
			}
		</style>
	</head>
	<body>
		<div class="mydiv">
			Looks like there's no more eye bleeding.
		</div>
	</body>
</html>

Of course, DIV's also allow for that beautiful rounded corners (you know, they're nice and straight on IE.)

Code: 
<html>
	<head>
		<style type="text/css">
			div.mydiv {
				/* basic */
				background-color: #fff;
				margin: 0 auto;
				width: 200px;
				padding: 100px;
				text-align: center;
				/* border-radius */
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				/* box-shadow */
				-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
				-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
				box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
			}
		</style>
	</head>
	<body>
		<div class="mydiv">
			Looks like there's no more eye bleeding.
		</div>
	</body>
</html>

(Forgive the massive indents,
Code: 
 tags parse them as eight spaces)
 
tooltiperror

tooltiperror

Super Moderator
Reaction score
231
Why let IE have it their way? The best approach to dealing with Internet Explorer is to just make sure it downgrades safely (so the straight borders aren't cutting into anything).
 
Magentix

Magentix

if (OP.statement == false) postCount++;
Reaction score
107
Graceful degradation vs progressive enhancement really..
 
tooltiperror

tooltiperror

Super Moderator
Reaction score
231
It really doesn't matter, considering IE9 is already in beta and will support all standard features of CSS3 (including those wonderful rounded borders and HTML5).
 
Magentix

Magentix

if (OP.statement == false) postCount++;
Reaction score
107
And every person in the world will automatically dump IE6, 7 and 8 for it..
(Slight sarcasm here)
 
tooltiperror

tooltiperror

Super Moderator
Reaction score
231
If they don't they morons, so I don't care. I'll add in an IF <=IE8 and add a download link.

Code: 
<html>
    <!--[if IE lte 8]>
        <p>This website requires <a href="http://www.internetexplorer.com/ie9">Internet Explorer 9</a>.</p>
    <!--[endif]-->
</html>
 
Magentix

Magentix

if (OP.statement == false) postCount++;
Reaction score
107
tooltiperror said:
If they don't they morons, so I don't care. I'll add in an IF <=IE8 and add a download link.

Code: 
<html>
    <!--[if IE lte 8]>
        <p>This website requires <a href="http://www.internetexplorer.com/ie9">Internet Explorer 9</a>.</p>
    <!--[endif]-->
</html>
Click to expand...

That may be easy for a hobby developer to day. If I were to tell my customers IE-users are morons (which would include them) and not code for IE, I'd be out of a business in no time.
 
tooltiperror

tooltiperror

Super Moderator
Reaction score
231
I suppose you're right from a professional stand-point :)

(not a moral one, lol.)
 
You must log in or register to reply here.
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Members online

      No members online now.
      Online now:
      379 (members: 2, guests: 377)

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top