validated html 5 table

Discussion in 'HTML' started by richard, Dec 2, 2013.

  1. richard

    richard Guest

    <!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.
     
    richard, Dec 2, 2013
    #1
    1. Advertisements

  2. richard

    dorayme Guest

    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, Dec 2, 2013
    #2
    1. Advertisements

  3. richard

    richard Guest

    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,
     
    richard, Dec 2, 2013
    #3
  4. richard

    Tim Streater Guest

    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.
     
    Tim Streater, Dec 2, 2013
    #4
  5. Other than '=' vs '==' there's nothing wrong with *that* bit of code.
     
    Norman Peelman, Dec 2, 2013
    #5
  6. 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, Dec 2, 2013
    #6

  7. 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>
     
    Jonathan N. Little, Dec 2, 2013
    #7
  8. richard

    j Guest

    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
     
    j, Dec 2, 2013
    #8
  9. 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.
     
    Jonathan N. Little, Dec 2, 2013
    #9
  10. richard

    richard Guest

    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.
     
    richard, Dec 2, 2013
    #10
  11. richard

    se Guest

    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
     
    se, Dec 2, 2013
    #11
  12. richard

    se Guest

    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
     
    se, Dec 2, 2013
    #12
  13. richard

    Evan Platt Guest

    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 Platt, Dec 2, 2013
    #13
  14. richard

    se Guest

    You're asking for raps, boy.

    /se
     
    se, Dec 2, 2013
    #14
  15. Evan, you got the class name wrong: s /basic/broken/
     
    Denis McMahon, Dec 2, 2013
    #15
  16. richard

    Evan Platt Guest

    Good point.

    We should take wagers - what will bullis finish first, his dome home,
    or his website?
     
    Evan Platt, Dec 3, 2013
    #16
  17. richard

    j Guest

    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
     
    j, Dec 3, 2013
    #17
  18. richard

    Tim Streater Guest

    All richards are dicks, by definition.
     
    Tim Streater, Dec 3, 2013
    #18
  19. richard

    Doug Miller Guest

    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.
     
    Doug Miller, Dec 4, 2013
    #19
  20. richard

    j Guest

    Indeed. But he does such a good job of taking himself down that it is
    superfluous.

    Jeff
     
    j, Dec 4, 2013
    #20
    1. 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 (here). After that, you can post your question and our members will help you out.