Somthing about tables that I never understood. [Archive]

View Full Version : Somthing about tables that I never understood.

Master Austin

11-19-2002, 01:21 AM

I've seen on some websites some weird tables. Instead of being 2 pixles thick there 1. I never could figure this out. Somone give me a little help.

DCElliott

11-19-2002, 05:34 AM

Read up on tables so that you have the basics. Pay attention to discussion of the border attribute - it controls the width of the lines between cells from border="0" to border="gonzo"
Any basic website/html tutorial on the web will have a tables section. Here are a couple:
http://vzone.virgin.net/sizzling.jalfrezi/tables.htm
http://www.htmlgoodies.com/tutors/tbl.html
http://www.pagetutor.com/pagetutor/tables/
http://html.about.com/cs/tables/ (watch out for popups :()

Master Austin

11-19-2002, 05:02 PM

I know the basics of tables. I've been messing with them for about two years now. The usual way of doing what I want is put all the bgcolor at #000000 and placing another table with bgcolor of #FFFFFF and it would have the effect that the table was 1 pxl.

DCElliott

11-19-2002, 06:23 PM

Sorry, I must be dense today. I still don't get what you're asking. Tables within tables gets complex and what you are calling a border may actually be the padding between the outer and inner tables.

Lets see the code and a screenshot (cropped to show the specific detail - there is a 100K attachment limit here) of what you are talking about and we will take it from there.

Master Austin

11-20-2002, 06:37 AM

This is one of those time machine websites, but it has good example.

http://web.archive.org/web/20010215023004/www.bulbagarden.com/anime/

Look all the way to the right, see the table that says thank you, and the others too. See how the borders are 1 pxl thick?

Dynasty

11-20-2002, 06:40 AM

It uses CSS to create the border rather than the table tag.

Master Austin

11-20-2002, 06:47 AM

Do you know of a site that I could learn CSS? A site with a humer would be nice... I like entertainment while learning.:D

DCElliott

11-20-2002, 07:29 AM

I've extracted the relevant code here:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled</title>
</head>

<body><basefont size="8pt" face="arial" color="black">
<table width="150" border="0" bordercolor="black" cellspacing="1" cellpadding="1" bgcolor="#000000">

<tr align="center" valign="middle" bgcolor="#FFCC33">
<td><b><font color="#000000">Latest Guide Update</font></b></td>
</tr>

<tr align="center" valign="middle">
<td height="106">
<b><font color="#FFEFA0">
Episode 130<br>
Tanks Alot
</font></b><br>
<a href="/anime/epi/jolt/133">
<img src="/anime/epi_images/jp133us130.jpg" width="130" height="99" border="0"></a><br>
<font color="#FFFFFF">Team Rockets plans to capture Otachi are intercepted</font><br>
<font color="#FFFFFF"><a href="/anime/epi/jolt/133">
<img src="/site-template/ly-anime/view_guide.gif"
width="127" height="15" border="0"></a></font>
</td>
</tr>

<tr bgcolor="#CCCCCC" align="center" valign="middle">
<td class="a_smallfont" height="21">
<font color="#000000">Click <a href="/anime/epi/jolt/130">here</a> for Guide</font>
</td>
</tr>

</table>

</body>
</html>What you are calling a border is in fact the background, I think. The border is set to 0, the table background is set to black (#000000) and cellspacing is set to 1 (pixel). Consequently, there is a 1 pixel rim of background black around the row/cell with the yellow background (#FFCC33) resulting from the cellspacing attribute. I have included a screenshot below.

I would suggest you load up the code in your editor and play around with the border and cellspacing attributes to see what the effects are. You can also add bordercolor="" attribute to specify your own bordercolor, or even create an inset|outset effect by using bordercolorlight="" bordercolordark="" for the left-top and right-bottom sides respectively.

Master Austin

11-20-2002, 06:14 PM

Thanks, this is way better looking than a regular table. More professional look.

While were at figuring out these weird web mysteries. Can somone tell me what kind of font does this site use? Like on the sidebar.

Somone told me it's arial but I don't belibe it. Arial is to sloppy to be that clean..

Zero Angel

11-21-2002, 12:02 AM

'Verdana' is another popular font. It looks professional and is easy to read.

Master Austin

11-21-2002, 12:04 AM

I know Verdana is good. But that text on that site is sorta small but big at the same time. Thats why I want it. Not to mention in my opinion it looks a little cleaner then verdana.

Wonder what font it is?:)

Master Austin

11-21-2002, 02:11 AM

Sorry bout double posting but...

I figured it out!

It was done with css. I just learned the basics tonight. Anyway if anyone wants it this is what you have to do.

<style type="text/css">
P {font-family: verdana; font-size: 8pt}
</style>

It knock it down 1 pixle giving a great little half big half small effect.

DCElliott

11-21-2002, 07:23 AM

You can actually use a "shortcut" form of applying a font style like this: P {font : normal normal normal 8px/9px Verdana, Geneva, Arial, Helvetica, sans-serif;}

The different properties are positional. What this means is:
P {font:
normal /*font style (normal or italic)*/
normal /*font variant (normal or small caps)*/
normal /*font weight (light normal bold)*/
8pt/ /*font size (use points for absolute sizing, ems for relative sizing)*/
9pt /*line height (should be > font size - determines line spacing*/
Verdana, Geneva, Arial, Helvetica, sans-serif /*preferred font and substitutions*/
;}
(note that you can put comments in styles by enclosing them in "/*...*/")
Learning the shortcuts can save you a lot of coding.