•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,963 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,055 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 690 | Replies: 3 | Solved
 |
•
•
Join Date: Feb 2008
Location: Houston, TX area
Posts: 11
Reputation: 
Rep Power: 1
Solved Threads: 0
Newbie Poster
Suggestions on this 3 column, tables in Div code Ok, I am having my first crack at HTML starting two weeks ago....
With some looking around, and lots of trial/effort on my own, this 3 column tables in Div code looked pretty nice on my website.
However, since I am soooo learning about HTML, I am asking for comments from those much more experienced.
1. Is this code shameful?
2. What suggestions do you have for integrating into CSS
3. Suggestions for jazzing up the boxes (adding color, mouseover text or gifs, other ideas?
Please comment, and thank you very much!
Loopster
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Tables and Buttons</title>
</head>
<body>
<br>
<div style="width: 600px;">
<div id="leftColumn" style="float: left; width: 200px;">
<table style="width: 190px; height: 163px;" border="3"
frame="box" rules="none">
<tbody>
<tr>
<td class="Center">
<h4> Beginner Package</h4>
<ul>
<li>Affiliate Programs</li>
<li>Search Engine Marketing</li>
<li>Pay Per Click</li>
<li>Finding Markets</li>
<li>Setting up a Website</li>
<li>And more!!!</li>
<br>
<br>
</ul>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<div id="leftColumn" style="float: left; width: 200px;">
<table style="width: 190px; height: 163px;" border="3"
frame="box" rules="none">
<tbody>
<tr>
<td class="Center">
<h4> Advanced Package</h4>
<ul>
<li>Website Analysis</li>
<li>Market Testing</li>
<li>Pay Per Click</li>
<li>Competitor Analysis</li>
<li>Traffic and Conversion Studies</li>
<li>And more!!!</li>
<br>
<br>
</ul>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<div id="rightColumn" style="float: right; width: 200px;">
<table style="width: 190px; height: 163px;" border="3"
frame="box" rules="none">
<tbody>
<tr>
<td class="center">
<h4> Ultra
Package</h4>
<ul>
<li>Market Analysis</li>
<li>SEO</li>
<li>Review of 12 Marketing Campaigns</li>
<li>Campaign Selection and Testing</li>
<li>And more!!!</li>
<br>
<br>
</ul>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
With some looking around, and lots of trial/effort on my own, this 3 column tables in Div code looked pretty nice on my website.
However, since I am soooo learning about HTML, I am asking for comments from those much more experienced.
1. Is this code shameful?
2. What suggestions do you have for integrating into CSS
3. Suggestions for jazzing up the boxes (adding color, mouseover text or gifs, other ideas?
Please comment, and thank you very much!
Loopster
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Tables and Buttons</title>
</head>
<body>
<br>
<div style="width: 600px;">
<div id="leftColumn" style="float: left; width: 200px;">
<table style="width: 190px; height: 163px;" border="3"
frame="box" rules="none">
<tbody>
<tr>
<td class="Center">
<h4> Beginner Package</h4>
<ul>
<li>Affiliate Programs</li>
<li>Search Engine Marketing</li>
<li>Pay Per Click</li>
<li>Finding Markets</li>
<li>Setting up a Website</li>
<li>And more!!!</li>
<br>
<br>
</ul>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<div id="leftColumn" style="float: left; width: 200px;">
<table style="width: 190px; height: 163px;" border="3"
frame="box" rules="none">
<tbody>
<tr>
<td class="Center">
<h4> Advanced Package</h4>
<ul>
<li>Website Analysis</li>
<li>Market Testing</li>
<li>Pay Per Click</li>
<li>Competitor Analysis</li>
<li>Traffic and Conversion Studies</li>
<li>And more!!!</li>
<br>
<br>
</ul>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<div id="rightColumn" style="float: right; width: 200px;">
<table style="width: 190px; height: 163px;" border="3"
frame="box" rules="none">
<tbody>
<tr>
<td class="center">
<h4> Ultra
Package</h4>
<ul>
<li>Market Analysis</li>
<li>SEO</li>
<li>Review of 12 Marketing Campaigns</li>
<li>Campaign Selection and Testing</li>
<li>And more!!!</li>
<br>
<br>
</ul>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
•
•
Join Date: Jul 2005
Location: india
Posts: 143
Reputation:
Rep Power: 4
Solved Threads: 15
Junior Poster
Re: Suggestions on this 3 column, tables in Div code Hi there,
If you are learning HTML then its nice work, Good Code actually, just I have some suggestions for you
1.) An "id" is a unique identifier. Every time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes
2.) in html code you have used blank "<tr> </tr>" which is also not valid
3.) you have "<br>" in "<UL>" its not valid as well you should insert "<br>" out side of "<ul>" like -> "</ul> <br>"
4.) you have used many " " before <h4> you may use margin-left for same effect
your code: (I have removed some list item for space)
you should write like this:
if you need to place <br> tag in page,
if you like to have some space underneath ul
and other is fine "Over all Nice Work"
you may get same effect without using table only with div and css
here is the example :
Hopefully this post will useful for you
Rahul Dev
If you are learning HTML then its nice work, Good Code actually, just I have some suggestions for you
1.) An "id" is a unique identifier. Every time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes
2.) in html code you have used blank "<tr> </tr>" which is also not valid
3.) you have "<br>" in "<UL>" its not valid as well you should insert "<br>" out side of "<ul>" like -> "</ul> <br>"
4.) you have used many " " before <h4> you may use margin-left for same effect
your code: (I have removed some list item for space)
<ul> <li>Affiliate Programs</li> <li>Search Engine Marketing</li> <br> <br> </ul>
you should write like this:
if you need to place <br> tag in page,
<ul> <li>Affiliate Programs</li> <li>Search Engine Marketing</li> </ul> <br> <br>
<ul style=”padding-bottom:30px;”> <li>Affiliate Programs</li> <li>Search Engine Marketing</li> </ul>
and other is fine "Over all Nice Work"
you may get same effect without using table only with div and css
here is the example :
<!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">
<head>
<meta content="text/html; charset=iso-8859-1"
http-equiv="Content-Type" />
<title>Tables and Buttons</title>
<style type="text/css">
<!--
.cleaner{
clear: both; height:1px!important; line-height:1px!important; float:none;
}
.leftColumn {
float: left; width: 190px; border:3px #ccc solid; border-bottom:#999999 3px solid; border-right:#999999 3px solid; margin-left:4px;
}
h4{
margin-left:20px;
}
-->
</style>
</head>
<body>
<div style="width: 600px;">
<div class="leftColumn">
<h4>Beginner Package</h4>
<ul>
<li>Affiliate Programs</li>
<li>Search Engine Marketing</li>
<li>Pay Per Click</li>
<li>Finding Markets</li>
<li>Setting up a Website</li>
<li>And more!!!</li>
</ul>
</div>
<div class="leftColumn">
<h4>Advanced Package</h4>
<ul>
<li>Website Analysis</li>
<li>Market Testing</li>
<li>Pay Per Click</li>
<li>Competitor Analysis</li>
<li>Traffic and Conversion Studies</li>
<li>And more!!!</li>
</ul>
</div>
<div class="leftColumn">
<h4>Ultra
Package</h4>
<ul>
<li>Market Analysis</li>
<li>SEO</li>
<li>Review of 12 Marketing Campaigns</li>
<li>Campaign Selection and Testing</li>
<li>And more!!!</li>
</ul>
</div>
<div class="cleaner"></div>
</div>
</body>
</html>Hopefully this post will useful for you
Rahul Dev
Last edited by katarey : Feb 14th, 2008 at 2:41 pm. Reason: added one more point :)
Freelance Web Designer & Developer
Http//www.Katarey.com
Http//www.Katarey.com
•
•
Join Date: Feb 2008
Location: Houston, TX area
Posts: 11
Reputation:
Rep Power: 1
Solved Threads: 0
Newbie Poster
Rahul,
Great! Yes your suggestions made it tighter and cleaner code. One small issue came up, however...The text of the Unordered List touches the right edge of the box in some cases. Seems that no margin exists between the text and the side of the box. Trying to work through that, but otherwise, Great! and Thank you!
Loopster
Great! Yes your suggestions made it tighter and cleaner code. One small issue came up, however...The text of the Unordered List touches the right edge of the box in some cases. Seems that no margin exists between the text and the side of the box. Trying to work through that, but otherwise, Great! and Thank you!
Loopster
•
•
Join Date: Jul 2005
Location: india
Posts: 143
Reputation:
Rep Power: 4
Solved Threads: 15
Junior Poster
Yeah!, for this thing you can add style for ul/ol or what ever you wanna put in that div that will work fine 
for margin you can write style like this
rahul
for margin you can write style like this .leftColumn ul {
margin:10px;
}
.leftColumn ul li{
margin:3px 5px;
} rahul Last edited by katarey : Feb 15th, 2008 at 9:32 am.
Freelance Web Designer & Developer
Http//www.Katarey.com
Http//www.Katarey.com
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
•
•
•
•
access activation api blogger blogging blogs code combo cross-browser javascript menu with few lines of code css dani daniweb data debugging development div dreamweaver dropdownlist equivalent code of messagebox in asp.net gdata google gpl html innovation key linux microsoft module net news openbsd product programming reuse rss serial source symantec tables tags vista web wysiwyg xml
- Previous Thread: dynamically generating buttons
- Next Thread: printing only a particular frame
