Tables

Tables can be a little tricky to set up in HTML. In real life, they are a simple but extremely useful way to organise data.

Firstly, let's look at what a table is made up of:

This makes a table, that looks something like this:

There's the <table> tag, firstly. This is probably quite obvious - it just tells the browser that we want to create a table.

Inside the table, there's a couple of abbreviated tags, which are a lot simpler than they look:

• <tr> is short for table row. It tells the browser to insert a row into the table. As you know, tables are made up of rows and columns. In HTML, you use a <tr> to define a row, and you put columns inside the row.

• <td> is short for table data. It goes inside a <tr> and defines a piece of data for that row. You have to use them in the same order in each row, as each <td> refers to a column, in the order you put them in.

• <th>  is short for table heading  and is very similar to <td>. You usually put them in the the first row of your table, because they define the column titles, such as 'Fruit' and 'Amount' in the above example.

Your turn

One quick thing to remember: the table you create here won't be styled as prettily as the example above - it won't have borders or proper spacing. These can be added using something called CSS, which you'll learn about later.

1. Drag the big blue basic structure block into the workspace. Change the title to anything you want. You're probably used to doing this by now!
2. Drag the dark orange table block into the body.
3. Drag the table row block into the table block, and experiment with adding table data and table heading blocks inside the table row, as well as adding more table rows below each other.

Lists

Lists are much simpler than tables. A list can be used to represent data in a visually clearer way to the user. A list can be either 'ordered' or 'unordered'.

Unordered lists

The term 'unordered' is just a fancier way of saying 'bullet points'. Here's an example:

This makes an unordered list, that looks like this:

• Item 1
• Item 2
• Item 3

Hopefully, you may have figured out how the code works. It's actually extremely simple:

• <ul> tag is short for unordered list, as you might have guessed. It just tells the browser that we want a simple bullet point list.

• <li> tag is short for list item. It goes inside <ul>, and defines an item in the list. The browser puts a bullet point next to the contents of each list item. You can put any kind of text inside a list item.

Ordered lists

Ordered lists are basically exactly the same as unordered lists, except they use numbers instead of bullet points. The code is the same, except for a single letter:

This creates an ordered list:

1. Item 1
2. Item 2
3. Item 3

Your turn

This doesn't really need too much explanation, so here you go: try playing with unordered/ordered lists and list items, and see what you can make. Again, remember that the styling might not be the same as in the examples above.

Summary and details

This is one of the most directly interactive HTML components you'll use. It can be used to summarise something, and then give more details about it when the user clicks on the text. Here's an example:

Even though the code is relatively simple, you get a powerful element for your website (try clicking on it):

To be fair, it's easy peasy to figure out what the code is doing. In fact, we won't even explain. The only important thing to note is that the summary can go anywhere inside the details block - the order doesn't actually make a difference.

Your turn

Give it a go to make sure you understand: