learnyouhtml

It's time to understand how tables work in HTML. Let's consider this table: ``` table ╔═══════╦═══════╗ ║ 1.1 ║ 1.2 ║ ╠═══════╬═══════╣ ║ 2.1 ║ 2.2 ║ ╚═══════╩═══════╝ ``` This table has 2x2 sizes. We could also say that this table has 2 rows and 2 columns. Let's split this table by rows: ``` table ╔═════════════════╗ ║ row1 ║ ║┏━━━━━━━┳━━━━━━━┓║ ║┃ 1.1 ┃ 1.2 ┃║ ║┗━━━━━━━┻━━━━━━━┛║ ╠═════════════════╣ ║ row2 ║ ║┏━━━━━━━┳━━━━━━━┓║ ║┃ 2.1 ┃ 2.2 ┃║ ║┗━━━━━━━┻━━━━━━━┛║ ╚═════════════════╝ ``` In table above we have table, which consists of two rows and each of those has two cells. Let's split each row by cols: ``` table ╔═════════════════════╗ ║ row1 ║ ║┏━━━━━━━━━┳━━━━━━━━━┓║ ║┃ col1 ┃ col2 ┃║ ║┃┌───────┐┃┌───────┐┃║ ║┃│ 1.1 │┃│ 1.2 │┃║ ║┃└───────┘┃└───────┘┃║ ║┗━━━━━━━━━┻━━━━━━━━━┛║ ╠═════════════════════╣ ║ row2 ║ ║┏━━━━━━━━━┳━━━━━━━━━┓║ ║┃ col1 ┃ col2 ┃║ ║┃┌───────┐┃┌───────┐┃║ ║┃│ 2.1 │┃│ 2.2 │┃║ ║┃└───────┘┃└───────┘┃║ ║┗━━━━━━━━━┻━━━━━━━━━┛║ ╚═════════════════════╝ ``` At this point we have a table, with rows. Each row contains columns and this columns has cells. That's exactly how tables looks in HTML. You creates table with `<table>` tag, rows with `<tr>` (_**t**able **r**ow_) tags and columns with `<td>` (_**t**able **d**ata_) tags. That's how table from previous examples might be represented in HTML: ``` <table> ╔═════════════════════╗ ║ <tr> ║ ║┏━━━━━━━━━┳━━━━━━━━━┓║ ║┃ <td> ┃ <td> ┃║ ║┃┌───────┐┃┌───────┐┃║ ║┃│ 1.1 │┃│ 1.2 │┃║ ║┃└───────┘┃└───────┘┃║ ║┃ </td> ┃ </td> ┃║ ║┗━━━━━━━━━┻━━━━━━━━━┛║ ║ </tr> ║ ╠═════════════════════╣ ║ <tr> ║ ║┏━━━━━━━━━┳━━━━━━━━━┓║ ║┃ <td> ┃ <td> ┃║ ║┃┌───────┐┃┌───────┐┃║ ║┃│ 2.1 │┃│ 2.2 │┃║ ║┃└───────┘┃└───────┘┃║ ║┃ </td> ┃ </td> ┃║ ║┗━━━━━━━━━┻━━━━━━━━━┛║ ║ </tr> ║ ╚═════════════════════╝ </table> ``` And here is the markup for table above: ```html <table> <tr> <td>1.1</td> <td>1.2</td> </tr> <tr> <td>2.1</td> <td>2.2</td> </tr> </table> ``` If you need to add heading row to you table, it's easy with `<th>` (_**t**able **h**ead_) tags. Just create a row with `<th>` cells, like so: ```html <p>Simple table with header</p> <table> <tr> <th>First name</th> ← table head <th>Last name</th> ← table head </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table> ``` Content of `<th>` tags will be displayed as bolder text. Each of those tags has a lot of special attributes. Read more here: * [`<table>` Attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/table#Attributes) * [`<tr>` Attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/tr#Attributes) * [`<td>` Attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/td#Attributes) * [`<th>` Attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/th#Attributes) ## THE CHALLENGE Create this table: ``` ╔══════════╦══════════╦══════════╗ ║ Europe ║ Asia ║ Africa ║ ╠══════════╬══════════╬══════════╣ ║ Ukraine ║ China ║ Egypt ║ ╠══════════╬══════════╬══════════╣ ║ Poland ║ India ║ Kenya ║ ╠══════════╬══════════╬══════════╣ ║ Italy ║ Thailand ║ Sudan ║ ╚══════════╩══════════╩══════════╝ ``` Above, first row is a heading row, so you should use `<th>` tag. After all, check your document with `learnyouhtml verify`. ---