CSS Lists and Tables
1 like1,319 views
The document discusses various CSS techniques for styling lists and tables. It provides examples of how to change list item markers, add images as markers, and control marker positioning. For tables, it shows how to add borders to tables and cells, control border styles, widths and colors, and collapse cell borders. Styles are demonstrated for centering, padding and aligning table cell content as well as setting background colors and text colors.
CSS Lists and Tables
- 1. css lists and tables More styling techniques
- 2. Styling lists You can change the appearance and the types of bullets (for unordered lists) and numbers (for ordered lists)
- 3. Speed test 01 1. Rock Eraserheads Franco Urbandub 2. Pop KC Concepcion Erik Santos Sexbomb Dancers 3. Hip-hop Andrew E Francis M Dice and K9
- 4. Speed test 01 <ol> <li>Rock<ul> <li>Eraserheads</li> <li>Franco</li> <li>Urbandub</li> </ul></li> <li>Pop<ul> <li>KC Concepcion/li> <li>Erik Santos</li> <li>Sexbomb Dancers</li> </ul></li> <li>Hip-hop<ul> <li>Andrew E</li> <li>Francis M</li> <li>Dice and K9</li> </ul></li> </ol>
- 5. List Properties rule: ul {list-style-type:value;} none disc circle square
- 6. list properties rule: ol {list-style-type:value;} decimal / decimal-leading-zero lower-alpha / upper-alpha lower-roman / upper-roman
- 7. Speed test 02 i. Rock Eraserheads Franco Urbandub ii. Pop KC Concepcion Erik Santos Sexbomb Dancers iii. Hip-hop Andrew E Francis M Dice and K9
- 8. Speed test 02 <ol> list-style-type:lower-roman; <li>Rock<ul class=rock > } <li>Eraserheads</li> <li>Franco</li> ul.rock{ <li>Urbandub</li> list-style-type:none; </ul></li> } <li>Pop<ul class=pop > <li>KC Concepcion/li> ul.pop{ <li>Erik Santos</li> list-style-type:circle; <li>Sexbomb Dancers</li> } </ul></li> <li>Hip-hop<ul class=hiphop > ul.hiphop{ <li>Andrew E</li> list-style-type:square; <li>Francis M</li> } <li>Dice and K9</li> </ul></li> </ol> ol{
- 9. List Properties list-style- image:url(/slideshow/css-lists-and-tables/4863866/filename.gif); list-style-position:inside;
- 10. Styling Tables Not much new rules Appearance depends heavily on your selectors (which elements you will apply your rule to)
- 11. Speed Test 03
- 12. Speed Test 03 <table> <tr> <tr> <td>3</td> <th>Rank</th> <td>Caloocan</td> <th>City</th> <td>1,378,856</td> <th>Population</th> </tr> </tr> <tr> <tr> <td>4</td> <td>1</td> <td>Davao City</td> <td>Quezon City</td> <td>1,363,337</td> <td>2,679,450</td> </tr> </tr> <tr> <tr> <td>5</td> <td>2</td> <td>Cebu City</td> <td>Manila</td> <td>798,809</td> <td>1,660,714</td> </tr> </tr> </table>
- 13. Styling tables border: 1px solid black; width:100%; height:30px; text-align:center; vertical-align:center; padding:5px; background-color:dimgray; color:black;
- 15. Borders
- 16. Speed Test 04
- 17. Speed Test 04 table { border:2px solid black; text-align:center; }
- 18. Speed Test 05
- 19. Speed Test 05 td{ border-top:2px solid black; } th, td{ padding:10px; }
- 20. Speed Test 06