CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.
Or, you can continue anyway.
Introduction/4
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:
| Fruit | Amount |
|---|---|
| Apple | 15 |
| Grapefruit | 8 |
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.
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.
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'.
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:
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 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:
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.
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):
Earth is the third planet from the Sun and the only astronomical object known to harbor life. According to radiometric dating and other sources of evidence, Earth formed over 4.5 billion years ago.
Planet Earth
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.
Give it a go to make sure you understand: