Downloaded 69 times
Uploaded byGerson Abesamis
CSS Lists and Tables
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 Morestyling techniques
- 2. Styling lists • Youcan 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(‘filename.gif’); • list-style-position:inside;
- 10. Styling Tables • Notmuch new rules • Appearance depends heavily on your selectors (which elements you will apply your rule to)
- 11.
- 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: 1pxsolid black; width:100%; height:30px; text-align:center; vertical-align:center; padding:5px; background-color:dimgray; color:black;
- 14.
- 15.
- 16.
- 17. Speed Test 04 table{ border:2px solid black; text-align:center; }
- 18.
- 19. Speed Test 05 td{ border-top:2pxsolid black; } th, td{ padding:10px; }
- 20.
- 21.