Examples and Notes by Week

↑ Up to Parent directory
View lists.css code.	Open/Save lists.css.
View ordered_lists.html code.	Open/Save ordered_lists.html.
View smile.jpg code.	Open/Save smile.jpg.
View sqpurple.gif code.	Open/Save sqpurple.gif.
View tables.css code.	Open/Save tables.css.
View tables.html code.	Open/Save tables.html.
View unordered_lists.html code.	Open/Save unordered_lists.html.

The code for tables.html is:
<!DOCTYPE html> <html lang="en"> <head> <title>Tables</title> <meta charset="utf-8"> <link href="tables.css" rel="stylesheet"> </head> <body> <h2>100% width</h2> <table class="full"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> <h2>Set the height of the second row to 200 pixels</h2> <table style="width:100%" class="collapsed"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr style="height:200px"> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <h2>Collapsed Borders</h2> <table class="collapsed"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <h2>Table Caption</h2> <table style="width:100%; border:2px solid red;"> <caption>Monthly savings</caption> <tr> <th colspan="2" style="text-align: center;">Monthly savings</th> </tr> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> <h2>colspan and rowspan</h2> <table> <tbody> <tr> <th colspan="3">2022</th> </tr> <tr> <td>xxxxx</td> <td colspan="2">yzyzyz</td> </tr> <tr> <th colspan="2" rowspan="2">FIESTA</th> <td>zzzzz</td> </tr> <tr> <td>z 3rd z</td> </tr> <tr> <td>xxxxx</td> <td>yyyyy</td> <td>zzzzz</td> </tr> </tbody> </table> <h2>Striped Table</h2> <table class="striped"> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> <th>SUN</th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <h2>Colgroup</h2> <table style="width: 100%;"> <colgroup> <col span="3" style="background-color: #D6EEEE"> <col span="4" style="background-color: #ffa"> </colgroup> <tr> <th>MON</th> <th>TUE</th> <th>WED</th> <th>THU</th> <th>FRI</th> <th>SAT</th> <th>SUN</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr> <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr> </table> </html>