Tables For Layout, Still Using It? CSS3 Table Style, I Am Not Sure...

@Danail Nachev, I completely agree. A layout system would definitely be preferable to using 'CSS tables'. With all of the 'little known' or 'advanced' HTML table tags such as caption, colscope etc. HTML tables provide much greater accessibility.

The other aspect is that there are so many other great enhancements to CSS in CSS3 that, I think, browser vendors should rather focus on implementing those then 'CSS tables'  

If CSS and javascript were modified a little bit, it would really help. Some from my wishlist:

1. When you have one div after another, place them horizontally one after the other irrespective of the size of the browser window.  If there is too much content horizontally, the browser should just display the horizontal scrollbar instead of moving the divs down.

 Example:

<div id="top_level">

     <div id="column1">Text for column 1</div>        

     <div id="column2"> Text for column 2 </div>

     <div id="column3">  Text for column 3 </div>

     <div id="column4" style="start: left">

     </div> 

      <div id="column5">Text for column 5</div> 

</div> 

In this examples, the divs with ids "column1", "column2", and "column3" should all come horizontally next to each other all starting from the same vertical position within the page.

Div with the id "column4" should go below "column1" and be aligned against the left edge of the browser window.Column5 div will line up to the right of the "column4" div.

2. Use additional relational markup for specifying properties of DOM elements. 

 Example:

 <div id="top_level">

    <div id="column1">Some random content of variable length and therefore height comes here</div>

     <div  id="column2" style="width: height: constraint(#column2: height)">Column2</div>

</div>

 Here "column2" div will have its height set automatically based on the  height of the DOM object with the id "column2". This means that "column2" will grow or shrink in tandem with "column1".

3. The browser should set valid values for ALL attributes of DOM elements with sensible defaults for those attributes which have not been explicitly specified using stylesheets or javascript functions.

Example:

 <div id="top_level" style="width: 300px">

</div>

<script>

   var toplevelDiv = document.getElementById("top_level");

   /*This will display nothing as style.left hasn't been explicity set in the style sheet or via javascript. */

   alert(topLevelDiv.style.left);  

   /* This will display the width of the div - 300px*/

   alert(topLevelDiv.style.width);

</script>

Here, whether the "style.left" property was explicity specified or not, the browser does know what the "left" attribute of a  DIV should return because a browser needs to be able to determine how to render any DOM element. So why doesn't the browser set valid values for all attributes of each DOM element.

 4.  This is not directly related to CSS however it has some bearing on CSS. There should be a support for a "Canvas" functionality and javascript should be include a drawing API so that arbitary shapes can be drawn in these canvases. In short, Javascript should be directly usable for rendering

 Example:

<canvas id="my_canvas" height="200px" width="200px">

   <circle id="circle1" x="100px" y="100px" radius="30px">

   </circle>

</canvas>

<script>

    var myCanvas = document.getElementById("my_canvas");

    myCanvas.drawCircle(100, 100, 50);

    myCanvas.drawPolygon(...)

</script>