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.
 
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.
Click to expand...

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>
Click to expand...

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,
Click to expand...

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,
Click to expand...

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!";}
Click to expand...

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!";}
 
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.
Click to expand...


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>
Click to expand...

a real life doctype is better.
<html>

<head>

<title>Tables 101</title>
Click to expand...

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;"}
Click to expand...
^^
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">
Click to expand...

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>
Click to expand...

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>
Click to expand...

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.
Click to expand...

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.
Click to expand...

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; }
Click to expand...

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
Click to expand...

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.
Click to expand...

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
 
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!";}
Click to expand...

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.
Click to expand...

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.
Click to expand...

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?"
Click to expand...

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

j

Good point.

We should take wagers - what will bullis finish first, his dome home,
or his website?
Click to expand...
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!";}
Click to expand...

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.
 

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

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Javascript DOM 1
Can anyone please help? HTML - two tables applying different styles 4
Sort by number of characters 1
How to wrap <td> content . 16
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Having trouble centering contents of td ? 3
Filter table rows based on multiple checkboxes value 2

Members online

No members online now.
Total: 68 (members: 0, guests: 68)
Robots: 369

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,736
Latest member
AdolphBig6

Latest Threads

Top