In the last HTML we saw that we can use a list (ordered or unordered) for our wish-list project. Tables are used to list things that have the same properties. In our case we could have a table that had a column with an image of the present, a column describing why we wanted it and a column with the approximate price.
Tables use the <table> element. Every row needs a table row element – <tr>, and every cell within the row needs a table data element <td>. It is very common to use a border attribute with your table element such as border="1".
There is a lot that you can do with tables such as have cells spanning columns, headings etc (see the relevant section of W3Schools for more detail) but one thing you should never do is use tables to lay out html content that is not a list of similar data elements – that is the job of CSS.
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td></tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td></tr></table>
- Create a 2 column, 3 row table using the presents from the previous section, with the second column being an approximate price.
- See what the table looks like without borders, and with different border values.
- If you have time, find out at W3Schools how to add a header to your table and do so.