General discussion

  • Creator
    Topic
  • #2274947

    Why CSS styling is for tables too

    Locked

    by maryweilage ·

    In this week’s Design and Usability Tactics e-newsletter, author Michael Meadhra explains and demonstrates how you can use CSS styling for tables.

    Do you feel that tables have no place on a modern, standards-based Web page? If so, does Michael Meadhra’s case for styling tables using CSS sway you?

    If you aren’t subscribed to the Design and Usability Tactics e-newsletter, visit our e-newsletter subcenter to subscribe:
    http://nl.com.com/MiniFormHandler?brand=build er&subs_channel=bldr_front_door&list_id=e614

    * Please delete any extra spaces that appear when you paste this link into your browser.

All Comments

  • Author
    Replies
    • #2734529

      Even better

      by builder ·

      In reply to Why CSS styling is for tables too

      The example would be even better if you use

      in the title row and style them properly.

      Also, use
      border-collapse: collapse;
      in the table to avoid double borders.

      • #2734428

        You beat me to the punch!

        by andrew t. fry ·

        In reply to Even better

        I was going to say the same thing about the

        tags.

        Also I do believe that the cellspacing translates not to

        margins, but

        margins.
        • #2734424

          Probably should have checked the spec first

          by andrew t. fry ·

          In reply to You beat me to the punch!

          Cellspacing, translates to border-spacing. Border-spacing can specify seperate horizontal and vertical spacing values.

        • #2734417

          Also to get the proper styling with…

          by andrew t. fry ·

          In reply to You beat me to the punch!

          Also to get the proper styling, without classes, you could you this code (valid CSS2, but unfortunately not well supported):

          table#sample {
          background-color: white;
          border: 3px solid black;
          border-spacing: 2px;
          width: 400px;
          }

          table#sample td {
          color: black;
          background-color: #cccccc;
          border: 1px solid black;
          text-align: right;
          padding: 5px;
          }

          table#sample th {
          color: black;
          border: 1px solid black;
          text-align: left;
          padding: 5px;
          }

          table#sample th:first-child {
          width: 150px;
          }

          table#sample tr {
          background-color: #cccccc;
          }

          table#sample tr:first-child {
          background-color: #ffffcc;
          }

          table#sample tr:first-child th {
          text-align: center;
          font-style: italic;
          font-weight: normal;
          }

          and the table:

            John Jane Total
          January 123 234 357
          February 135 246 381
          March 257 368 625
          Total 515 848 1363

          It looks identical in Mozilla Firefox. Strangely IE 6 appears to apply the width to the first

          cells properly, but not the background-color for the first

          .
    • #2734291

      One quibble with the article

      by wwb_99 ·

      In reply to Why CSS styling is for tables too

      Rather than using a td.header class, one should really use th tags to denote the header row. It is much more semantically correct.

      WWB

    • #2734698

      Reply from author

      by meadhra ·

      In reply to Why CSS styling is for tables too

      The examples in the article were deliberately simplified to focus on the core point that CSS *can* apply to tables. The article wasn’t intended to be comprehensive coverage of table-related CSS (that would take a whole book chapter).

      For example, I didn’t use the

      tag because a lot of web builders don’t bother with that tag (even though it is more proper and correct to do so). Including it would have complicated the article slightly by requiring extra CSS code to counteract the tag’s default attributes, plus an explanation of that code.

      As for the border-spacing attribute, it’s valid CSS alright, but it isn’t supported by the dominant browser, so it isn’t currently a usable replacement for the cellspacing attribute of the table tag. I probably should have been more explicit about that particular point.

      • #2734679

        Perfectly valid concerns…

        by andrew t. fry ·

        In reply to Reply from author

        Those are perfectly valid concerns, but I think that just slipping in the tags would have been fine. Then in a future article you merely explain how to properly use tables.

Viewing 2 reply threads