Skip to the content
- table {width: 100%} Unless you specify this, the width of the table will depend on the size of the content. At 100%, it will stretch to cover 100% of the size of the containing div.
- td, th {padding: 10px;} This will be the same as specifying cellpadding.
- image tag quirk: if you have an <img> tag inside a table, and there is an unwanted space below, set the image display:block
- text-align controls the position of the text within the tables
- vertical-align: top; baseline (almost same as top, but all the cells have the same “baseline”, or position on top based on the first line of text. middle and bottom.
- Space between cells. By default, browsers put 2 pixels, border-spacing: 0px; will eliminate that, but IE 7 won’t understand it. For now, better use the old fashioned <table cellspacing=”0″>
- borders, when used on tables, cells double up borders as they touch up between cells. table {border-collapse: collapse; } will eliminate those double borders, and gets rid of the cellspacing between cells as well.
- Making rows alternate colors. Unfortunately there is no pure CSS solution (yet). .odd{ background-color: yellow; } applied to <tr class=”odd”> every other row will do
- Columns, the HTML tag applied to it are: colgroup (group of columns, styles applied to this applies to all columns on the group). For the col tag, only two sets of CSS will work with: width, and background-properties. You can apply id’s and apply styles with it to columns. Cells styling have preference over column styling, which shows underneath cell styling.
- <table><caption>Your text here shows before the table as a table label, it can be styled</caption>
- table-layout:fixed; The width of the columns will be calculated off the first row. Faster load, since the browser don’t have to wait for all the rows to load to calculate the width of the columns.