PDA

Click to See Complete Forum and Search --> : Basic Question About Table

Perito
06-03-2009, 05:28 AM
hi,
I'd like to say that I'm extremely new to xhtml and CSS, so please bare with me.

My question is simple, consider I have this code

<table class="mainTable" border="0" cellspacing="30">
<tbody>
<tr>
<td>
<p><b><a class="button" href="l1.html"
target="_blank">Link1</a></b></p>
</td>
<td>
<p><b><a class="button" href="l2.html"
target="_blank">Link2</a></b></p>
</td>
<td>
<p><b><a class="button"
href="l3.html" target="_blank">Link 3</a></b></p>
</td>
<td>
<p><b><a class="button"
href="l4.html" target="_blank">Link 4</a></b></p>
</td>
</tr>
</tbody>
</table>


1) what does target="_blank" mean?
2) My intention is to place this table in the upper center of the screen. How can I center the table ?
3) The height on each cell in this table is huge, how can I decrease the height of the cells?

Thanks
Ronnie268
06-03-2009, 06:09 AM
target="_blank" opens in a new window or tab but is deprecciated in (x)html strict. Use this javascript replacement.

To center the table, go into the CSS and write

table {
float: none;
margin: 0 auto;
}

You made need a margin fix for Internet Explorer.

and try

td {
height: 40px;
}

replace 40px with whatever value you want.

Ronnie268
Ronnie268
06-03-2009, 06:15 AM
Sorry, I forgot to include the javascript target link. Here it is.

Replace Target Attribute with Javascript (http://blog.jjtcomputing.co.uk/2009/03/21/using-javascript-to-replace-target-attribute-in-xhtml-strict/)
Charles
06-03-2009, 07:26 AM
What's up with the XHTML? Stick with HTML 4.01 Strict. Yes, target="_blank" was done away with back in the last century. More importantly, do not use TABLEs for layout but do use your HTML elements according to their semantics. You have a list there so use a list.Putting it all together:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>

<script type="text/javascript">
if (document.getElementsByTagName) onload = function () {
var a, i = 0
while (a = document.getElementsByTagName ('A')[i++]) if ( /\bexternal\b/i.test (a.getAttribute ('rel'))) a.onclick = function () {window.open (this.href, 'child'); return false}
}
</script>

<style type="text/css">
ul, li {margin:0; padding:0}
ul {width:10em}
ul {margin:auto}
li {font-weight:bold}
</style>
</head>
<body>
<ul>
<li><a href="fee.html" rel="external">Fee</a></li>
<li><a href="fie.html" rel="external">Fie</a></li>
<li><a href="foe.html" rel="external">Foe</a></li>
<li><a href="fum.html" rel="external">Fum</a></li>
</ul>
</body>
</html>
Alan P
06-04-2009, 12:00 PM
I may get flamed for saying this, but using tables for your basic layout is fine.

I use tables for my basic layout and CSS for the styling. I use DIV's here and there for additional styling and placement of specific information. This has worked very well for me.

All my websites are cross browser compatible and nearly all of them show up on the first page of a Google or Yahoo search, and quite often in the number one slot. Table designed websites are completely SEO (Search Engine Friendly) and will load up much faster than "advanced" sites using new technology junk like Flash (but that's another discussion).

I'm not knocking new technology or a new way of doing things, but don't let people convince you that the old ways are completely wrong. I started out designing websites using nothing but CSS and DIV's and I quickly learned that (on their own) they had many problems and limitations.

Basically, you have to travel to China and join a Shaolin Temple and become a Shaolin Priest trained in the "hacking style", to write complete CSS driven websites that everyone can see. But don't take my word for it, here are some excerpts from a well known book about designing CSS driven websites:

this...book shows designers how to how to create sites using CSS that are just as visually advanced as they used to be with table-driven layouts."are just as" good as table-driven layouts.
...there are idiosyncrasies with how CSS and its various elements interact in different browsers. The workarounds or hacks to solve many of these idiosyncrasies are explained in the following chapters.

CSS is not supported as consistently in browsers as XHTML (and HTML added) tables are, so it requires more testing by the designer. Not only are there compliant and non-compliant browsers that handle CSS differently, but there also are different versions of such browsers.

This means there are more bugs and thus more workarounds and hacks that a designer must be familiar with to fix the bugs.This book retails for $49.99 in the U.S. and is the "third edition".

Just because something is new doesn't mean that it is better... it's just new.

But now to your questions.

I use HTML 4.01 Transitional and "_blank" works fine for me.

To center the table in the page using the HTML type above, I simply use: <center><table>...</table></center>

If you do not want any space above the table put this in the head section:<style type='text/css'>
body {
margin: 0px;
}
</style>

I don't know why your cells are high unless you have something else in them. But I would assign a width to the table and eliminate the cellspacing like this:<center><table class="mainTable" border="0" cellspacing="0" width="400px">If you want your main table to be wider but your links to not span the distance of the mainTable then just nest another table in your mainTable's <td> like this:<table class="mainTable" border="0" cellspacing="0" width="400px">
<tr>
<td align="center">

<table border="0" cellspacing="0" width="50%">
<tr>
<td><a href="l1.html" target="_blank" class="button">Link1</a></td>
<td><a href="l2.html" target="_blank" class="button">Link2</a></td>
<td><a href="l3.html" target="_blank" class="button">Link 3</a></td>
<td><a href="l4.html" target="_blank" class="button">Link 4</a></td>
</tr>
</table>

</td>
</tr>
</table></center>You don't need to wrap the links in a <p> tag. And instead of using the <b> tags, put font-weight:bold; in the style clause for the class "button".

CSS driven websites doesn't require as much code to render as a table design website does, but you'll have to include multiple hacks to get it to work over different browsers. I personally don't see the advantage of this since most all of my table driven websites load up well under 10 seconds using a dial-up modem and are completely SEO (Search Engine Friendly).
Declan1991
06-04-2009, 02:31 PM
You'll have to include multiple hacks to get it to work over different browsers.

You can do whatever you want, but that is not the case. Yes, the more complex and obscure CSS 2 and 3 don't always work cross-browser, but most site can be created with no hacks at all, and no conditional comments. Occasionally the odd conditional comment is needed to keep IE in check, but it's rare.

Quoting selectively from CSS books is pointless.

For visual browsers, the end result might be the same, but Lynx and screen readers will be delighted if you could use the far more powerful and customisable existing tags in HTML to make it meaningful. SEO works much better when the markup is clean and free from meaningless padding.

You will not be "flamed" certainly by me. The benefits of CSS stand on their own merit, and there is only need to point out the wrongs in your post.