5 Replies Latest reply on Dec 30, 2008 8:52 PM by Sergey Smirnov

    Rendering components using div instead of tables

    Matt Veitas Newbie

      I have noticed that there are a lot of RF components that are using tables to do the component layout instead of using div tags. Is there a specific reason for using tables to render the components vs div?

      I am not a HTML or CSS expert, but from what I have read, div is the way to go when it comes to layout.


      From http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

      Using CSS and DIV tags reduces markup code, speeds up page downloads, separates content from its visual presentation, and brings your code closer to Web standards compliance--all while making your website more appealing to search engine spiders.


        • 1. Re: Rendering components using div instead of tables
          Gilles Demarty Newbie

          +1 for me


          http://css-discuss.incutio.com/?page=TablesVsDivs


          Advantages CSS can have over tables:
          * smaller page size, quicker to load
          * future flexibility
          * easier to read the source
          * search-engine-friendly


          It would be easier to manage (and style) div based renderers than table based.



          • 2. Re: Rendering components using div instead of tables
            Matt Veitas Newbie

            The only down side to this is that someone who does not know what they are doing with CSS can get into some deep deep trouble!

            Any thoughts from the rest of the developers on this topic?

            • 3. Re: Rendering components using div instead of tables
              Sergey Smirnov Master

              The last word in fashion is not a reason to break a backward compatibility.

              • 4. Re: Rendering components using div instead of tables
                Tim Taylor Newbie

                Mixing the use of html tabular tags (table, thead, tbody, tfoot, tr, td, th, etc.) as layout controls and css presentation methods is like trying to take a Model T Ford and put mag wheels and wide tires on it to modernize it.

                There are many reasons that using css to control presentation vs using a hacked nested table struture for layout and chief among the reasons are these:

                1. programming best practices seperate structure (markup) from presentation (look and feel) and behavior (javascript, dhtml, ajax, etc.)
                2. use of semantical markup (use h1 instead of a table with a class or font tag) allows accessibility of the page in a natural manner.
                3. nesting tables confuse the accessibility readers
                4. nesting tables as layout control takes longer to parse during page rendering
                5. nested tables are inflexible for any major layout changes vs css selector control
                6. nested tables are more difficult to trouble shoot and do maintenance
                7. nested tables are a hack for not learning new technology and techniques to improve the user experience
                8. table are primarily used for tabular data not creating tabs, lists, columns for layout, headers, footers, menus, etc.
                9. backwards compatibility is a falsehood. Support of any browser can be maintained in a degraded presentation mode and still provide full functionality and content. The need to support a pixel perfect rendering in Netscape 4.x and IE5.x browsers is non-sensical as those browsers are no longer supported by the manufacturers. Anything prior to IE6 is creating more complexity, cost of maintenance and impeding design and application development.

                The role of a UI engineer as developer of the front end code is a discipline in and of itself. With the advent of JSF, Facelets and frameworks like richFaces, a UI engineer can create and design richer interfaces that are more flexible, maintainable, structured and robust than the old techniques of hacking tables as layout tools.

                Richfaces must move away from the table structure for tabs, lists, menus, etc. in order to provide more accessibility, better performance and flexibility than the current structure of these widgets in its framework.

                At least that is my 2 cents worth. Let the flaming begin!

                • 5. Re: Rendering components using div instead of tables
                  Sergey Smirnov Master

                  You said nothing new. Everybody know that.

                  However, depriving the possibility for future upgrade thousands of developers with their existing applications is not a fair.