Tables for HTML (beginner lesson)

Here are some basic table structures and more for beginners lol.

Here's some basic info you need to know:

(Note: Everything here has a closing tag unless said otherwise)

<table> is the element you need to make a table. (duh)

<tr> You indicate the start of each row using the opening tag. (The tr stands for table row.)

<td> is table data, which is where you put the things you wanna list

Here is your fist example below. Throw it into a code test site like https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro and try it.

<table>
 <tr>
 <td>15</td>
 <td>15</td>
 <td>30</td>
 </tr>
 <tr>
 <td>45</td>
 <td>60</td>
 <td>45</td>
 </tr>
 <tr>
 <td>60</td>
 <td>90</td>
 <td>90</td>
 </tr>
</table>

<table>
 <tr>
 <th></th>
 <th scope="col">Adults</th>
 <th scope="col">Childrens</th>
 </tr>
 <tr>
 <th scope="row">Tickets sold:</th>
 <td>120</td>
 <td>135</td>
 </tr>
 <tr>
 <th scope="row">Total sales:</th>
 <td>$600</td>
 <td>$675</td>
 </tr>
</table>

This one above has the following which you need to know:

<th> The element is used just like the element but its purpose is to represent the heading for either a column or a row. (The th stands for table heading.)

This one below has a spanning column. Scary? Not really.

The 'colspan' attribute can be used on a or element and indicates how many columns that cell should run across. Easy right? throw it into the code tester from W3Schools

<table>
 <tr>
 <th></th>
 <th>9am</th>
 <th>10am</th>
 <th>11am</th>
 <th>12am</th>
 </tr>
 <tr>
 <th>4/20</th>
 <td colspan="2">Geography</td>
 <td>Math</td>
 <td>Art</td>
 </tr>
 <tr>
 <th>4/21</th>
 <td colspan="3">Gym</td>
 <td>Home Ec</td>
 </tr>
</table>

Since we have spanning columns... we need spanning rows

The 'rowspan' attribute can be used on a or element to indicate how many rows a cell should span down the table. Try it!

<table>
 <tr>
 <th></th>
 <th>ABC</th>
 <th>BBC</th>
 <th>CNN</th>
 </tr>
 <tr>
 <th>6pm - 7pm</th>
 <td rowspan="2">Movie</td>
 <td>Comedy</td>
 <td>News</td>
 </tr>
 <tr>
 <th>7pm - 8pm</th>
 <td>Sport</td>
 <td>Current Affairs</td>
 </tr>
</table>

Want some long tables? HERE:

The headings of the table should sit inside the <thead> element.

The body should sit inside the <tbody> element.

The footer belongs inside the <tfoot> element.

<table>
 <thead>
 <tr>
 <th>Date</th>
 <th>Income</th>
 <th>Expenditure</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th>1st January</th>
 <td>250</td>
 <td>36</td>
 </tr>
 <tr>
 <th>2nd January</th>
 <td>285</td>
 <td>48</td>
 </tr>
 <!-- additional rows as above -->
 <tr>
 <th>31st January</th>
 <td>129</td>
 <td>64</td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td></td>
 <td>7824</td>
 <td>1241</td>
 </tr>
 </tfoot>
</table>

Want a challenge for practice? Here:

Write the code for the following charts (yes you must use color)

Easy: