Member Avatar for Loopster

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>&nbsp;&nbsp;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>&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>

  • 2 Contributors
  • 3 Replies
  • 106 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by katarey
Member Avatar for katarey

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 "&nbsp;" 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>

if you like to have some space underneath ul

<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

Member Avatar for Loopster

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

Member Avatar for katarey

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

.leftColumn ul {
	margin:10px;	
}
.leftColumn ul li{
	margin:3px 5px;	
}

:) rahul

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.