CSS For Layouts: Meh, I'll Stick With Tables, Thanks

by Jon Davis 24. September 2009 11:09

I tend to agree with the sentiments posted here:

http://www.flownet.com/ron/css-rant.html [followups here and here].

I've wasted WAY too many aggregate hours trying to nudge DIVs into place using half-baked CSS semantics that work on all browsers without workarounds, where the simple use of a <TABLE> tag would have sufficed just fine. Even this blog's sidebar does not behave the way I wanted it to behave despite spending some time trying and failing to get it to behave according to my preferences because I chose CSS instead of <TABLE> and, frankly, CSS sucks for some things such as this. With <TABLE> I can say simply <TABLE WIDTH="100%"><TR><TD>..</TD><TD WIDTH="300"> and boom I have a perfect sidebar with fixed width and a fluid content body with ABSOLUTELY NO CSS TO HAVE TO MANGLE other than disabling the default HTML rendering behavior of borders and spacing.

Ron comments,

Another common thread is that "tables are for tabular data, not layout." Why? Just because they are called tables? Here's a news flash: HTML has no semantics beyond how it is rendered! (That's not quite true. Links have semantics beyond their renderings. And maybe label tags. But nothing else in HTML does.)

The only reservation I have in favor of DIVs instead of TABLEs is when it gets down to nesting. Deeply nested <TABLE>'s can get really, really ugly. I think this is where all the hatred of <TABLE>s comes from, which I agree with.

I've reached the conclusion that if I can use <DIV>'s effectively (and quickly) and the behavior is predictable, I'll use DIVs. But same with TABLEs. I have yet to hear a CSS purist describe a logical reason to use DIVs+CSS over TABLEs for overall page structure. It all seems to be cognative dissonance and personal bias.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

Web Development

Highlighting a TR (HTML Table Row) With A Border

by Jon Davis 29. March 2008 15:44

Here's another workaround to fix another elementary problem in Internet Explorer. Again, this isn't anything new, but if anyone is coming across this blog looking for an answer to this problem, here's the solution.

(And by the way, yeah, this is really elementary. I should be focusing on real problems.)

Someone in a local technology mailing list asked for help on how one highlights a table row in Javascript. He tried the following function, but it did not work for him.

function OutlineTableRow(RowID,BColor,BWidth,BStyle)
{
 var TableRow = document.getElementById(RowID);
 if(TableRow)
 {
  TableRow.style.borderColor = BColor;
  TableRow.style.borderStyle = BStyle;
  TableRow.style.borderWidth = BWidth;
 }
}

So how to you border-highlight a row in HTML? Internet Explorer doesn't support CSS on the TR like it should. You have to do it on the cells themselves. You also have to be careful not to divide the cells with borders; the leftmost and rightmost cells should be the only cells to get left or right borders, respectively. Finally, you must also set the border-collapse CSS property on the table to "collapse", otherwise the border itself will have seperation points on the inner edges of each cell.

Here's my workaround in Javascript, feel free to copy:

<html>
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr id="aa">
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
           </tr>
        </table>
        <script type="text/javascript" language="javascript" >
            function outlineTableRow(rowId, borderColor, borderWidth, borderStyle){
                var tableRow = document.getElementById(rowId);
                if (tableRow) {
                    var table = tableRow.parentNode;
                    while (table.tagName.toLowerCase() != "table") {
                        table = table.parentNode;
                    }
                    table.style.borderCollapse = "collapse";
                    var tableCells = tableRow.getElementsByTagName('td');
                    if (tableCells.length > 0) {
                   
                        for (i = 0; i < tableCells.length; i++) {
                            if (i == 0) {
                                tableCells[i].style.borderLeftColor = borderColor;
                                tableCells[i].style.borderLeftStyle = borderStyle;
                                tableCells[i].style.borderLeftWidth = borderWidth;
                            }
                            else
                                if (i == tableCells.length - 1) {
                                    tableCells[i].style.borderRightColor = borderColor;
                                    tableCells[i].style.borderRightStyle = borderStyle;
                                    tableCells[i].style.borderRightWidth = borderWidth;
                                }
                            tableCells[i].style.borderTopColor = borderColor;
                            tableCells[i].style.borderTopStyle = borderStyle;
                            tableCells[i].style.borderTopWidth = borderWidth;
                            tableCells[i].style.borderBottomColor = borderColor;
                            tableCells[i].style.borderBottomStyle = borderStyle;
                            tableCells[i].style.borderBottomWidth = borderWidth;
                           
                        }
                    }
                }
            }
           
            window.onload = function(){
                outlineTableRow('aa', '#f00', '2px', 'outset');
            }
        </script>
    </body>
</html>

Result:
1 2 3
1 2 3
1 2 3

But one should use CSS for this. Rather than explicitly setting [element].style.[cssproperty], instead one should set the className property, then define the details in CSS. If you really want to pass arbitrary styles to a function, jQuery would also be essential for doing this. Come to think of it, jQuery would be essential, regardless.

Currently rated 3.0 by 1 people

  • Currently 3/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,

Web Development


 

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen

About the author

Jon Davis (aka "stimpy77") has been a programmer, developer, and consultant for web and Windows software solutions professionally since 1997, with experience ranging from OS and hardware support to DHTML programming to IIS/ASP web apps to Java network programming to Visual Basic applications to C# desktop apps.
 
Software in all forms is also his sole hobby, whether playing PC games or tinkering with programming them. "I was playing Defender on the Commodore 64," he reminisces, "when I decided at the age of 12 or so that I want to be a computer programmer when I grow up."

Jon was previously employed as a senior .NET developer at a very well-known Internet services company whom you're more likely than not to have directly done business with. However, this blog and all of jondavis.net have no affiliation with, and are not representative of, his former employer in any way.

Contact Me 


Tag cloud

Calendar

<<  September 2018  >>
MoTuWeThFrSaSu
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

View posts in large calendar