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.
  • WildTurkey WildTurkey:
    is there a stephen green in the house?
     +1
  • The Helper The Helper:
    What is up WildTurkey?
  • The Helper The Helper:
    Looks like Google fixed whatever mistake that made the recipes on the site go crazy and we are no longer trending towards a recipe site lol - I don't care though because it motivated me to spend alot of time on the site improving it and at least now the content people are looking at is not stupid and embarrassing like it was when I first got back into this like 5 years ago.
  • The Helper The Helper:
    Plus - I have a pretty bad ass recipe collection now! That section of the site is 10 thousand times better than it was before
  • The Helper The Helper:
    We now have a web designer at my job. A legit talented professional! I am going to get him to redesign the site theme. It is time.
  • Varine Varine:
    I got one more day of community service and then I'm free from this nonsense! I polished a cop car today for a funeral or something I guess
  • Varine Varine:
    They also were digging threw old shit at the sheriff's office and I tried to get them to give me the old electronic stuff, but they said no. They can't give it to people because they might use it to impersonate a cop or break into their network or some shit? idk but it was a shame to see them take a whole bunch of radios and shit to get shredded and landfilled
  • The Helper The Helper:
    whatever at least you are free
  • The Helper The Helper:
    Here is a cool dessert recipe I found https://www.thehelper.net/threads/recipe-cherry-cheesecake-brownie.194048/
  • The Helper The Helper:
    Found a cool easy Chicken Pot Pie recipe! https://www.thehelper.net/threads/recipe-chicken-pot-pie.194064/
  • Monovertex Monovertex:
    How are you all? :D
     +1
  • Ghan Ghan:
    Howdy
  • Ghan Ghan:
    Still lurking
     +3
  • The Helper The Helper:
    I am great and it is fantastic to see you my friend!
     +1
  • The Helper The Helper:
    Here is a great appetizer recipe Texas style! https://www.thehelper.net/threads/recipe-chicken-stuffed-poblano-peppers.194086/
  • The Helper The Helper:
    If you are new to the site please check out the Recipe and Food Forum https://www.thehelper.net/forums/recipes-and-food.220/
  • Monovertex Monovertex:
    How come you're so into recipes lately? Never saw this much interest in this topic in the old days of TH.net
  • Monovertex Monovertex:
    Hmm, how do I change my signature?
  • tom_mai78101 tom_mai78101:
    Signatures can be edit in your account profile. As for the old stuffs, I'm thinking it's because Blizzard is now under Microsoft, and because of Microsoft Xbox going the way it is, it's dreadful.
  • The Helper The Helper:
    I am not big on the recipes I am just promoting them - I use the site as a practice place promoting stuff
     +2
  • Monovertex Monovertex:
    @tom_mai78101 I must be blind. If I go on my profile I don't see any area to edit the signature; If I go to account details (settings) I don't see any signature area either.
  • The Helper The Helper:
    You can get there if you click the bell icon (alerts) and choose preferences from the bottom, signature will be in the menu on the left there https://www.thehelper.net/account/preferences
  • The Helper The Helper:
    I think I need to split the Sci/Tech news forum into 2 one for Science and one for Tech but I am hating all the moving of posts I would have to do
  • The Helper The Helper:
    New dessert for Summer - https://www.thehelper.net/threads/recipe-lemon-blueberry-layer-cheesecake.194113/
  • The Helper The Helper:
    What is up Old Mountain Shadow?

      The Helper Discord

      Members online

      No members online now.
      Online now:
      302 (members: 0, guests: 302)

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top