1000Gbps 1000Gbps - 5 days ago 7
CSS Question

Table borders not drawn in HTML4+

I got another problem, this time with tables and their borders in HTML (4.01, 5.0)

Notice: All codes are from w3schools.com

When using this code:

<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>


Everything is drawn correctly in the browser (FF, IE, Opera, Chrome), but when the
border="1"
is changed with
style="border: 1px;"
the borders and cell walls disappear.
I can't find the reason, but using
style
gives me the precious validation.

That's my main file sections:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>
Title of the document
</title>
<style type="text/css">
body {background-color:teal;}
</style>
</head>


I hope someone here knows where's the problem is ...
Here are the results with classic
border
and
style
:

http://www.free imagehosting.net/pyk3e << border="1"


http://www.free imagehosting.net/cw98o << style="border: 1px solid black;" for cells too

Answer

You may need border: 1px solid;. Having the pixels alone isn't enough, you have to tell the browser what to do with them. :)

But remember that if you use <table style="border: 1px solid">, that will create a border around the TABLE, not the cells within the table.

You'll need to specify a border for the cells too.

You should probably just specify a stylesheet:

<style type="text/css">
  TABLE, TD {
    border: 1px solid;
  }
</style>

Or even, identify your table or TD blocks with an ID or a class, then use that in your stylesheet, so you don't affect other innocent bystander tables.