validated html 5 table


R

richard

<!DOCTYPE HTML>

<html>

<head>

<title>Tables 101</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1252">
<style type="text/css">
table {Border-collapse:collapse; text-align:center; margin:auto;"}
td, th {padding:10px;}
.red {background:#f00;}
.blue {background:#00f;}
</style>

</head>
<body>

<table border="1">
<tr class="red"><th>One</th><th>Two</th><th>Three</th></tr>
<tr><td>A</td><td></td><td></td></tr>
<tr><td>B</td><td></td><td></td></tr>
<tr class="blue"><td>C</td><td></td><td></td></tr>
</table>

</body>
</html>

Now that, is how you properly code a table.
All text within the table is centered within a cell.
the table will automatically center itself within it's container.
The cells will be shown as 1 pixel wide in black with no whitespace between
the cells.
 
Ad

Advertisements

D

dorayme

richard said:
<!DOCTYPE HTML>

<html>

<head>

<title>Tables 101</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1252">
<style type="text/css">
table {Border-collapse:collapse; text-align:center; margin:auto;"}
td, th {padding:10px;}
.red {background:#f00;}
.blue {background:#00f;}
</style>

</head>
<body>

<table border="1">
<tr class="red"><th>One</th><th>Two</th><th>Three</th></tr>
<tr><td>A</td><td></td><td></td></tr>
<tr><td>B</td><td></td><td></td></tr>
<tr class="blue"><td>C</td><td></td><td></td></tr>
</table>

</body>
</html>

Now that, is how you properly code a table.
All text within the table is centered within a cell.
the table will automatically center itself within it's container.
The cells will be shown as 1 pixel wide in black with no whitespace between
the cells.

Best to check your markup for actual results, and use various
validation facilities (to eliminate the leniency that might be shown
by some browsers but not others.
 
R

richard

Try this:


<!DOCTYPE html>
<html>
<head>
<title>Tables 101</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table {Border-collapse:collapse; text-align:center; margin:auto;"}
td, th {padding:10px;}
.red {background:#f00;}
.blue {background:#00f;}
</style>
</head>
<body>
<table border="1">
<tr class="red">
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>A</td>
<td></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr class="blue">
<td>C</td>
<td></td>
<td></td>
</tr>
</table>
<div contenteditable="false"></div>
</body>
</html>

BFD
So you put in line feeds to make it more "human appealing".
Neither the server nor the browser gives a shit.
And who is gonna be looking at the code once it's online?
Maybe 1% of the viewers.

I can find the beginning of the rows easier if they're all on one line.

And I still can't understand why THIS is bad coding.
if ($a=1){echo "help!";}
if the code is that damn short, it don't need to be broke apart.
Spreading it out over 10 lines is a waste of space,
 
T

Tim Streater

richard said:
And I still can't understand why THIS is bad coding.
if ($a=1){echo "help!";}
if the code is that damn short, it don't need to be broke apart.
Spreading it out over 10 lines is a waste of space,

1) You are *still* confusing = and ==.

2) I'd write it as:

if ($a==1) echo "help!";

There are those who will splutter at that but fuckem.
 
N

Norman Peelman

BFD
So you put in line feeds to make it more "human appealing".
Neither the server nor the browser gives a shit.
And who is gonna be looking at the code once it's online?
Maybe 1% of the viewers.

I can find the beginning of the rows easier if they're all on one line.

And I still can't understand why THIS is bad coding.
if ($a=1){echo "help!";}
if the code is that damn short, it don't need to be broke apart.
Spreading it out over 10 lines is a waste of space,

Other than '=' vs '==' there's nothing wrong with *that* bit of code.
 
D

Denis McMahon

And I still can't understand why THIS is bad coding.
if ($a=1){echo "help!";}

Because:

$a=1;
echo "help!";

Is more readable, and readability of code is important when you're trying
to remember, when someone suddenly removes a bunch of previously
deprecated functions from a new release and you need to fix all your
code, what you were trying to do.

If I come across:

if ($a=1) {echo "help!";}

in someone elses code, or even in code I wrote 6 months ago, then unless
I have a helpful comment I have to try and figure out which of the
following possible meanings the coder intended:

Choice 1, it was a weird way to write:

// assign the value 1 to $a, then echo help

$a=1;
echo "help!";

Choice 2, it was a typo for:

// if $a has the value 1, echo help

if ($a==1) {echo "help!";}
 
Ad

Advertisements

J

Jonathan N. Little

richard said:
<!DOCTYPE HTML>

<html>

<head>

<title>Tables 101</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1252">
<style type="text/css">
table {Border-collapse:collapse; text-align:center; margin:auto;"}
td, th {padding:10px;}
.red {background:#f00;}
.blue {background:#00f;}
</style>

</head>
<body>

<table border="1">
<tr class="red"><th>One</th><th>Two</th><th>Three</th></tr>
<tr><td>A</td><td></td><td></td></tr>
<tr><td>B</td><td></td><td></td></tr>
<tr class="blue"><td>C</td><td></td><td></td></tr>
</table>

</body>
</html>

Now that, is how you properly code a table.
All text within the table is centered within a cell.
the table will automatically center itself within it's container.
The cells will be shown as 1 pixel wide in black with no whitespace between
the cells.


Well I am not sure that you actually tested your markup first. Aside of
a few typos that made some of your css invalid, backgrounds on TRs won't
work. Here is what I think you intended corrected:

<!DOCTYPE HTML>

<html>

<head>
<title>Tables 101 - rev A</title>

<style type="text/css">
table { border-collapse: collapse; text-align: center; margin: auto; }
td, th { padding: 10px; }

/* set border on table and cells */
table, td, th { border: 1px solid #000; }

/* set TR row background colors */
tr.red > * { background: #f00; }
tr.blue > * { background: #00f; }
</style>
</head>
<body>

<table>
<tr class="red"><th>One</th><th>Two</th><th>Three</th></tr>
<tr><td>A</td><td></td><td></td></tr>
<tr><td>B</td><td></td><td></td></tr>
<tr class="blue"><td>C</td><td></td><td></td></tr>
</table>

</body>
</html>
 
J

j

<!DOCTYPE HTML>

a real life doctype is better.
<html>

<head>

<title>Tables 101</title>

It looks ugly to me. Not easily readable.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1252">
<style type="text/css">
table {Border-collapse:collapse; text-align:center; margin:auto;"}
^^
double quote for no reason.

Typically you see everything lowercase with a space after the colon, my
preference is like this:

table {
border-collapse: collapse;
text-align: center;

.... Often the CSS needs tweaking and it is easier to find when it isn't
one lined.

Whether this is center aligned or not depends on the data. Not
everything reads better center aligned. Most data doesn't.


td, th {padding:10px;}
.red {background:#f00;}
.blue {background:#00f;}
</style>

</head>
<body>

<table border="1">

I tend not to use an attribute but put the border in the stylesheet.
When you are tinkering with styling it is nice to just tinker with the
stylesheet and not have to go in and tinker with the html also.

And a tbody would be nice and perhaps a thead.
<tr class="red"><th>One</th><th>Two</th><th>Three</th></tr>

Something like this may be easier to read:
<tr class="red">
<tr><td>A</td><td></td><td></td></tr>
<tr><td>B</td><td></td><td></td></tr>
<tr class="blue"><td>C</td><td></td><td></td></tr>

When you put content in cells the lines can get really long and having
some whitespace and indentation helps find your place.
</table>

</body>
</html>

Now that, is how you properly code a table.

Not really. If you are going to set yourself up as an example, make it
look right. What you do in your own html is another matter.

HTML/CSS often needs adjusting at some point. One lined html and css is
not so easy to locate and read. Don't push that as "proper". What you
have is more or less OK, but it should be no ones example of proper.

Jeff
 
J

Jonathan N. Little

Jonathan said:
backgrounds on TRs won't work.

I'll correct myself, background WILL work on TR elements. It is when
folks try to styles table rows via the TR for *borders* that fail. The
OP markup failed to set row colors because of syntax errors.
/* set TR row background colors */
tr.red > * { background: #f00; }
tr.blue > * { background: #00f; }

Therefore this will work...

tr.red { background: #f00; }
tr.blue { background: #00f; }

....and the other corrections still stand.
 
R

richard

a real life doctype is better.

It looks ugly to me. Not easily readable.
^^
double quote for no reason.

Typically you see everything lowercase with a space after the colon, my
preference is like this:

table {
border-collapse: collapse;
text-align: center;

... Often the CSS needs tweaking and it is easier to find when it isn't
one lined.

Whether this is center aligned or not depends on the data. Not
everything reads better center aligned. Most data doesn't.




I tend not to use an attribute but put the border in the stylesheet.
When you are tinkering with styling it is nice to just tinker with the
stylesheet and not have to go in and tinker with the html also.

And a tbody would be nice and perhaps a thead.


Something like this may be easier to read:
<tr class="red">


When you put content in cells the lines can get really long and having
some whitespace and indentation helps find your place.

Not really. If you are going to set yourself up as an example, make it
look right. What you do in your own html is another matter.

HTML/CSS often needs adjusting at some point. One lined html and css is
not so easy to locate and read. Don't push that as "proper". What you
have is more or less OK, but it should be no ones example of proper.

Jeff

The doctype is correct!
Learn the declaration for html5.

My purpose here is to show how tables should be handled with css.
How you code your stuff is your business.

There is a purpose for thead and tbody.
Obviously you not know that.
 
S

se

Jonathan N. Little said:
I'll correct myself, background WILL work on TR elements. It is when folks
try to styles table rows via the TR for *borders* that fail. The OP markup
failed to set row colors because of syntax errors.


Therefore this will work...

tr.red { background: #f00; }
tr.blue { background: #00f; }

...and the other corrections still stand.

Yes,
It was his quot typo at the end in this line here:
table {Border-collapse:collapse; text-align:center; margin:auto;"}

I falled in to this trap the same and therefore made some testes on his
code. Thereby discovered somting new I didn't know of.
<table border> as it stands without any width, works in all major browsers,
at least in newer ones. The browsers picks the width to be 1 pixel.

Discovered a flaw in FF 23.01 and the latest 25.01 that shows the
vertical colomn borders in different widths. No matter in what way
the borders are set, with/or without use of unit on the width. Whether
using style="....." or the old border:"1px". Wheter styling them in the
the <table> tag or directli in <td> tag. But, it only happens when using
a table header <th>. Updated FF to the latest version 25.01. Didn't
help. The other major browsers does not show this width-difference
in the vertical colomn borders.

Unless someone presents a solution to this, I'll consider it a flaw in FF
Could be none-exsisting on a linux-box. I'm on windows.

/se
 
Ad

Advertisements

S

se

Denis McMahon said:
Because:

$a=1;
echo "help!";

Is more readable, and readability of code is important when you're trying
to remember, when someone suddenly removes a bunch of previously
deprecated functions from a new release and you need to fix all your
code, what you were trying to do.

If I come across:

if ($a=1) {echo "help!";}

in someone elses code, or even in code I wrote 6 months ago, then unless
I have a helpful comment I have to try and figure out which of the
following possible meanings the coder intended:

Choice 1, it was a weird way to write:

// assign the value 1 to $a, then echo help

$a=1;
echo "help!";

Choice 2, it was a typo for:

// if $a has the value 1, echo help

if ($a==1) {echo "help!";}

Thank you;
for posting a polite answer to the forum.
I for my part has forgotten the case. Nothing more from here
about it.

/se
 
E

Evan Platt

Now that, is how you properly code a table.
All text within the table is centered within a cell.
the table will automatically center itself within it's container.
The cells will be shown as 1 pixel wide in black with no whitespace between
the cells.

You're giving HTML lessons now? Where can I sign up for your
introductory class, "How to write a basic website in just under 5
years with the help of hundreds of people from dozens of Usenet
Newsgroups?"
 
S

se

richard said:
The doctype is correct!
Learn the declaration for html5.

My purpose here is to show how tables should be handled with css.
How you code your stuff is your business.

There is a purpose for thead and tbody.
Obviously you not know that.

You're asking for raps, boy.

/se
 
D

Denis McMahon

You're giving HTML lessons now? Where can I sign up for your
introductory class, "How to write a basic website in just under 5 years
with the help of hundreds of people from dozens of Usenet Newsgroups?"

Evan, you got the class name wrong: s /basic/broken/
 
Ad

Advertisements

J

j

Good point.

We should take wagers - what will bullis finish first, his dome home,
or his website?
It's a shame richard has turned out to be such a dick. I'd be interested
in the Dome home, having known two people who have built them. One of
which is on the back cover of "Woodstock Handmade Houses".

Life has pretty much moved on from domes. They create more problems than
they solve. Maybe that explains richard...

Jeff
 
D

Doug Miller

And I still can't understand why THIS is bad coding.
if ($a=1){echo "help!";}

It's bad coding because = is the *assignment* operator in PHP, not the test-for-equality
operator.

*I* still can't understand why you continue to make that error, after having been corrected so
many times.
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top