table

[Cullen411]

This is something that I can't seem to get my head around... rather than using an old style table what would I replace it with!

would it be 3 div's that floated to the left each with an overall width of 100px? and then could I just use the p tag and include the links in the p in their respective div with a line break separating them vertically? How does a solution like that sound for the table below


<table cellspacing="0" cellpadding="0" style="border:2px solid #000000; background:#FFFFFF; padding:5px; width:300px;">
<tr>
<td valign=top> <a href="default.asp?qry=test">test</a></td>
<td valign=top> <a href="default.asp?qry=test">test</a></td>
<td valign=top> <a href="default.asp?qry=test">test</a></td>
</tr>
<tr>
<td valign=top> <a href="default.asp?qry=test">test</a></td>
<td valign=top> <a href="default.asp?qry=test">test</a></td>
<td valign=top> <a href="default.asp?qry=test">test</a></td>
</tr>
<tr>
</table>


thanks for your time

 

[Vragabond]

Hard to say, since you do not want to let us know what exactly you are doing. You might opt for three floated unordered lists with list item as one of the links. That would probably work best. However, if you need to ensure that link in a row are level, I suppose you're dealing with tabular data and table is the best way to go. Without knowing more about your goals, this is the best I can do.

 

[ChrisHunt]

Like Vrag says, it depends. You need to forget, initially, about how things will be displayed and concentrate on their structure and meaning.

First: What actually are those links? Are they six individual, unconnected entities, or two lists of three links, or a single list of six, or something else?

Then: How can I best markup the relationship between the links using HTML. With lists of links, you'll often use <ul>s, but there are alternatives that are applicable in some cases.

Finally: Use CSS to display the HTML elements in the way you desire. You may, very occasionally, need to subvert the HTML to get it to work as you want - but don't make a habit of it. Adding an extra <div>, <span> or class is usually a better solution.

For example, let's suppose that your code above is intended to be a list of six links, that you happen to be displaying in a 3x2 grid. Here's some logical markup for it:

<ul class="links">
  <li><a href="default.asp?qry=test">test</a></li>
  <li><a href="default.asp?qry=test">test</a></li>
  <li><a href="default.asp?qry=test">test</a></li>
  <li><a href="default.asp?qry=test">test</a></li>
  <li><a href="default.asp?qry=test">test</a></li>
  <li><a href="default.asp?qry=test">test</a></li>
</ul>

Now you can write some CSS to style it as you want:

ul.links {
  border:2px solid #000000;
  background:#FFFFFF;
  padding:5px;
  width:300px;
  margin: 0;
  list-style: none;
  overflow: auto;
}

ul.links li {
  width: 100px;
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}

The HTML contains the content & structure of the document, the CSS contains the styling. When you change your mind about how to display the information, you only have to change the CSS file.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd