HTML Tables are ok in some circumstances
Yes, indeed, HTML Tables are ok in some circumstances, for example:
- laying out table data e.g. a list of items
- laying out forms. I know you can float each label and then clear to go onto a new line. But I had a page which was using floats already to create left and right columns. Then within the right floated column I had some form controls. Frankly, the css got complicated. Everything was float: left, I used clear:left and I had alot of css to set margins etc. I switched to using tables to layout the form data and it was a simpler solution, less "brittle" if layout had to change. Please see screenshot below for the result (still a work in progress).
Remember to set table width, usually 100%. Otherwise table will resize to size of data.
You can set widths of <th> columns to define the width of each column, using % or pixel.
You can align text left, right as well as up and down. To do so, use text-align and vertical-align . You can use these css properties at table and column levels.
Padding property works for padding left and right of a <td>
border-collapse: collapse; When adding borders you need this setting so it doesn't double show
- laying out table data e.g. a list of items
- laying out forms. I know you can float each label and then clear to go onto a new line. But I had a page which was using floats already to create left and right columns. Then within the right floated column I had some form controls. Frankly, the css got complicated. Everything was float: left, I used clear:left and I had alot of css to set margins etc. I switched to using tables to layout the form data and it was a simpler solution, less "brittle" if layout had to change. Please see screenshot below for the result (still a work in progress).
Remember to set table width, usually 100%. Otherwise table will resize to size of data.
You can set widths of <th> columns to define the width of each column, using % or pixel.
You can align text left, right as well as up and down. To do so, use text-align and vertical-align . You can use these css properties at table and column levels.
Padding property works for padding left and right of a <td>
border-collapse: collapse; When adding borders you need this setting so it doesn't double show
Comments
Post a Comment