1. Applying CSS to Tables
Stylish Tables

2. Issue #1
Borders

3. Causes to look like there’s a small well between each cell
By Default…
Borders show doubled-up when made to appear
What if we don’t want that?
Causes to look like there’s a small well between each cell

4. Collapse Them!
Will cause borders directly adjacent to each other to simply appear as a single border

5. Issue #2
Long Tables

6. Long Tables Really long tables are hard to read
Solution #1 – alternate coloring of rows
Solution #2 – make a row change color when user hovers over it

7. Solution #1
Create a class that you apply to every other row

8. Solution #2
Add a hover pseudo-select to rows

9. Cell Dimensions Controlled by Text
Issue #3
Cell Dimensions Controlled by Text

10. Solution: Set Widths Setting width of table Units: pixels, %
If use % - sizes to that percent of container (right now – that’s the whole page)
Example:
After
Before

11. Setting Width of Cells %  percent of total table Example: Before
After

12. Text too close to edge of cell
Issue #4
Text too close to edge of cell

13. Solution: Padding
Example:
Before
After

14. Text alignment in cells
Issue #5
Text alignment in cells

15. Solution – Control with text-align
Example:
Before
After

16. Etc.
Can basically style using all the selectors we have seen for other elements
Font properties
Padding – overall and on particular sides
Border – overall and on particular sides
Background colors and images
Etc.

17. Etc. Can style at multiple levels of control by using certain elements
<table>  entire table overall – includes surrounding outline and overall background
<tr>  an entire row
<th>  heading cell
<td>  data cell
Can also create classes and apply selectively to certain parts

18. Working with More than One Table on a Page, but Styling Differently?
Use ID’s

19. ID’s Assign the table an id
<table id=“tb1”>
….other code for table
When go to style parts of THAT table only, precede element with #id:
#tb1 tr{ … }