Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > validated html 5 table

Reply
Thread Tools

validated html 5 table

 
 
richard
Guest
Posts: n/a
 
      12-02-2013
<!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.
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      12-02-2013
In article <1m72ll6tilkj3$.yh1eaxm47irs$(E-Mail Removed)>,
richard <(E-Mail Removed)> wrote:

> <!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.

--
dorayme
 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      12-02-2013
On Mon, 2 Dec 2013 08:46:19 +0100, Sjeef wrote:

> 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 ****.
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,
 
Reply With Quote
 
Tim Streater
Guest
Posts: n/a
 
      12-02-2013
In article <14n99wa0uvq6y$(E-Mail Removed)>, richard
<(E-Mail Removed)> wrote:

> 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 ****em.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
 
Reply With Quote
 
Norman Peelman
Guest
Posts: n/a
 
      12-02-2013
On 12/02/2013 03:30 AM, richard wrote:
> On Mon, 2 Dec 2013 08:46:19 +0100, Sjeef wrote:
>
>> 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 ****.
> 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.


--
Norman
Registered Linux user #461062
-Have you been to www.php.net yet?-
 
Reply With Quote
 
Denis McMahon
Guest
Posts: n/a
 
      12-02-2013
On Mon, 02 Dec 2013 03:30:17 -0500, richard wrote:

> 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!";}

--
Denis McMahon, http://www.velocityreviews.com/forums/(E-Mail Removed)
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-02-2013
richard wrote:
> <!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>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
j
Guest
Posts: n/a
 
      12-02-2013
On 12/1/2013 11:55 PM, richard wrote:
> <!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">
<th>....

> <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


> 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.
>


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-02-2013
Jonathan N. Little wrote:

> 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.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
richard
Guest
Posts: n/a
 
      12-02-2013
On Mon, 02 Dec 2013 08:24:47 -0500, j wrote:

> On 12/1/2013 11:55 PM, richard wrote:
>> <!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">
> <th>....
>
>> <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
>
>
>> 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.
>>


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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Client Destroys My Validated HTML Raymond SCHMIT HTML 5 08-02-2008 11:11 PM
Re: Client Destroys My Validated HTML Travis Newbury HTML 1 07-31-2008 03:56 PM
Re: Client Destroys My Validated HTML Adrienne Boswell HTML 0 07-31-2008 02:27 PM
ASP.net validation controls don't are not validated(fired) on the client side. mallik ASP .Net 3 07-07-2005 08:42 AM
dynamically created control is not being validated DesignerX ASP .Net 2 07-24-2003 04:47 PM



Advertisments