HTML & XHTML: Difference between revisions
(→CSS) |
|||
Line 13: | Line 13: | ||
= CSS = | = CSS = | ||
== Margins and | == Margins, paddings and borders on a table == | ||
Margins don't seem to work at all with table elements (it would work with the table itself, though). Paddings seem to work only with <td> elements, not <tr>. | Margins don't seem to work at all with table elements (it would work with the table itself, though). Paddings seem to work only with <td> elements, not <tr>. | ||
So the recommended way to specify spacings between elements in a table is through the specific <tt>'border-spacing'</tt> element. | So the recommended way to specify spacings between elements in a table is through the specific <tt>'border-spacing'</tt> property. Note that this property should be applied to the table element, not the <td>. | ||
Note that the border property, specifying the border of the cell, should be on the contrary applied to each <td> cell, like this: | |||
table.with_borders td {border: 1px solid black; padding: 3px;} | |||
If you write this, borders will have in fact most of the time 2 pixels, because the borders will not be merged between two cells. If you want them to merge (and thus always have only 1 pixel), use <tt>border-collapse: collapse;</tt> in your table element. | |||
You can specify certain properties to be applied to an entire column in a table (for exemple the 'border' property). However not all properties can be such applied, apparently. For example, I don't know how to apply the text-align property to an entire column (or if it is even possible). |
Revision as of 13:06, 16 March 2007
Various important things I noticed when writing HTML & CSS code.
HTML
Forms
If you use the GET method on a form, on the action URL, don't give an URL already containing variables encode in GET style. The browser will just rebuild the URL when you submit the form, and thus the variables will be ignored. Eg, something like:
<form action="myurl.html?myVariable=yes&myCounter=3" method="GET"><button type="submit></button></form>
won't work. If you want to pass variables and use a GET method, just create hidden input fields.
CSS
Margins, paddings and borders on a table
Margins don't seem to work at all with table elements (it would work with the table itself, though). Paddings seem to work only with elements, not . So the recommended way to specify spacings between elements in a table is through the specific 'border-spacing' property. Note that this property should be applied to the table element, not the . Note that the border property, specifying the border of the cell, should be on the contrary applied to each cell, like this:
table.with_borders td {border: 1px solid black; padding: 3px;}
If you write this, borders will have in fact most of the time 2 pixels, because the borders will not be merged between two cells. If you want them to merge (and thus always have only 1 pixel), use border-collapse: collapse; in your table element.
You can specify certain properties to be applied to an entire column in a table (for exemple the 'border' property). However not all properties can be such applied, apparently. For example, I don't know how to apply the text-align property to an entire column (or if it is even possible).