Applying CSS to Tables Stylish Tables

Issue #1 Borders

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

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

Issue #2 Long Tables

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

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

Solution #2 Add a hover pseudo-select to rows

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

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

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

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

Solution: Padding Example: Before After

Text alignment in cells Issue #5 Text alignment in cells

Solution – Control with text-align Example: Before After

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.

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

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

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{ … }