Presentation is loading. Please wait.

Presentation is loading. Please wait.

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything › Text › Lists › Other tables › Pictures › …

Similar presentations


Presentation on theme: "Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything › Text › Lists › Other tables › Pictures › …"— Presentation transcript:

1

2 Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything › Text › Lists › Other tables › Pictures › …

3  Required › Table › Row › Data  Optional elements › Header (replaces data) › Caption  For multipage tables › Thead (contains rows) › Tfoot (contains rows) › Tbody (contains rows)  REQUIRED if thead or tfoot

4  Borders › Colors › Widths › Spacing  Backgrounds  Fonts  Spacing

5  Every element in the table has a border  Adjacent cells can have their own borders (default) or they can share a border (border-collapse)

6

7  Often need to repeat format on multiple elements  CSS notation th,tr,td { border: none; }

8  Tables will adjust columns based on content  What if you want them fixed width? › Fixed and same td { width: …; } › Fixed and different class per td (but have to put it on every td) (will look at better alternative next week)

9  They have width. Use margins.  Elements in table can have any text align you want  Remember display: table;

10  CAN’T BE DONE IN CSS  HTML attributes on td › colspan=“n” › rowspan=“n”

11  Better to save tables for actual tables  For page layout: floating divs  For navigation and pictures: lists and divs


Download ppt "Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything › Text › Lists › Other tables › Pictures › …"

Similar presentations


Ads by Google