Everyone once in awhile I get have to go for coding mode to designing and writing HTML and CSS for an internal tool or translating it into Velocity. I’ve learned to use Firebug to debug most HTML and CSS issues. Lately, I’ve been running into table formatting and layout issues, here are few tags and settings you can use or play with to help you resolve yours.
1. rowspace: when this attribute is used, usually defining a table cell, it will take up space in the current row, and the row below, so watch out for any strange formatting.
2. valign: aligns font either to the top, bottom, or middle of a table cell.
3. td: make sure all rows in your table have the same number of table cells otherwise your table elements will be incorrectly formatted. A caveat to this is if you use colspan and specify the number of td’s you want, then you dont have to explicitly use “<td></td>”. Also if you are using th (headers) make sure that you have the same number of th’s as td’s.
4. input type=”hidden”: I love using this when submitting forms, because I can place an id of the object that the form is referencing, and then parse it out of a HttpServletRequest.
5. class: use this as much as possible and define your classes in CSS. One thing I love doing is referencing the CSS file in Firebug and changing it on the fly. To do this just open Firebug in Firefox, select ‘CSS’, and choose the file you want to edit from the ‘Edit’. Then you can easy change the values of the elements, and the changes are instantly rendered in the browser. If you don’t want to see the changes then just refresh the page. This doesn’t persist anything to your CSS files, it just helps you figure out what looks good.
