Tables can be tricky because they are hard for search engines to read and difficult for beginners to get the hang of. However, there are many special things you can use tables for. Many sites use tables to make layouts and charts.



Different parts of a table:

<tr> which are rows, <td> which are cells inside the rows, <th> which are headers inside tables.

Colspan and Rowspan are used when you need a cell to span more than one column or one row. To do this, you would use the colspan or rowspan properties, respectively, inside your tag, such as <td colspan="2"> or <th rowspan="2">. However many rows or columns you need the cell to span is the number you put between the parenthesis.


If you wanted a simple table to show which Pokémon evolve from which evolution stone, you could make a table like this:



<table align="center" border="1">
<tr>
<th colspan="4" >
Evolution
</th>
</tr>
<tr>
<th>Pokémon</th>
<td>Vaporeon</td>
<td>Jolteon</td>
<td>Flareon</td>
</tr>
<tr>
<th>Stones</th>
<td>Water Stone</td>
<td>Thunder Stone</td>
<td>Fire Stone</td>
</table>


This would look like:

Evolution
Pokémon Vaporeon Jolteon Flareon
Stones Water Stone Thunder Stone Fire Stone


OR


<table align="center" border="1">
<tr>
<th colspan="2" >
Evolution</th>
</tr>
<tr>
<th>Pokémon</th>
<th>Stones</th>
</tr>
<tr>
<td>Vaporeon</td>
<td>Water Stone</td>
</tr>
<tr>
<td>Jolteon</td>
<td>Thunder Stone</td>
<tr>
<td>Flareon</td>
<td>Fire Stone</td>
</tr>
</table>


This would look like:

Evolution
Pokémon Stones
Vaporeon Water Stone
Jolteon Thunder Stone
Flareon Fire Stone


Tables can also be given special commands, such as background color or image, font color, size, and borders. When adding pictures, you could specify a picture in the background of each cell, each row, the entire table background, or you could add pictures inside a cell, which is how you can have pictures inside of a table layout.

To add pictures, you can stylized the inside the of the table, row, or cell tag by adding style="background-image:url('your image's url here').

For the whole background of a table, the tag will look like <table style="background-image:url('your image's url here');">

For the background of a row, you will write <tr style="background-image:url('your image's url here')";>

And, the code for the inside of the cell will be <td style="background-image:url('your image's url here')";>

How will this look? Well, let's say you'd like a texture in the background. Just for teaching purposes, we'll use one from Stareon's Hideout. If we wanted a texture behind the whole table we made above, the code will look like:


<table style="background-image:url('https://stareonshideout.neocities.org/texture4.PNG');" align="center" border="1">
<tr>
<th colspan="4" >
Evolution</th>
</tr>
<tr>
<th>Pokémon</th>
<td>Vaporeon</td>
<td>Jolteon</td>
<td>Flareon</td>
</tr>
<tr>
<th>Stones</th>
<td>Water Stone</td>
<td>Thunder Stone</td>
<td>Fire Stone</td>
</table>


And, the result will be:
Evolution
Pokémon Vaporeon Jolteon Flareon
Stones Water Stone Thunder Stone Fire Stone



For textures in just one cell, your code would be:

<table align="center" border="1">
<tr>
<th style="background-image:url('https://stareonshideout.neocities.org/texture4.png');" colspan="4" >
Evolution</th>
</tr>
<tr>
<th>Pokémon</th>
<td>Vaporeon</td>
<td>Jolteon</td>
<td>Flareon</td>
</tr>
<tr>
<th>Stones</th>
<td>Water Stone</td>
<td>Thunder Stone</td>
<td>Fire Stone</td>
</table>

And it would look like this instead:

Evolution
Pokémon Vaporeon Jolteon Flareon
Stones Water Stone Thunder Stone Fire Stone



If you wanted to use different background textures for every cell, you would use this code:


<table align="center" border="1">
<tr>
<th style="background-image:url('https://stareonshideout.neocities.org/texture4.png');" colspan="4">
Evolution</th>
</tr>
<tr>
<th style="background-image:url('https://stareonshideout.neocities.org/texture3.png');">Pokémon</th>
<td style="background-image:url('https://stareonshideout.neocities.org/texture1.png');">Vaporeon</td>
<td style="background-image:url('https://stareonshideout.neocities.org/texture3.png');">Jolteon</td>
<td style="background-image:url('https://stareonshideout.neocities.org/texture1.png');">Flareon</td>
</tr>
<tr>
<th style="background-image:url('https://stareonshideout.neocities.org/texture1.png');">Stones</th>
<td style="background-image:url('https://stareonshideout.neocities.org/texture3.png');">Water Stone</td>
<td style="background-image:url('https://stareonshideout.neocities.org/texture1.png');">Thunder Stone</td>
<td style="background-image:url('https://stareonshideout.neocities.org/texture3.png');">Fire Stone</td>
</table>


And, it would then look something like this:
Evolution
Pokémon Vaporeon Jolteon Flareon
Stones Water Stone Thunder Stone Fire Stone





When applying the same principle of adding images to backgrounds, you will find adding color is even easier. For instance, to make the background of our example table pink, all you need is to write bgcolor="pink" after inside the table tag. Your code will look like this:


<table bgcolor="pink" align="center" border="1">
<tr>
<th colspan="4" >
Evolution</th>
</tr>
<tr>
<th>Pokémon</th>
<td>Vaporeon</td>
<td>Jolteon</td>
<td>Flareon</td>
</tr>
<tr>
<th>Stones</th>
<td>Water Stone</td>
<td>Thunder Stone</td>
<td>Fire Stone</td>
</table>


When using the above code, your chart or table will appear like this:

Evolution
Pokémon Vaporeon Jolteon Flareon
Stones Water Stone Thunder Stone Fire Stone




You can put any web safe or hex color code between the parenthesis and you will get your background color instantly. You can make each cell, header, or row background a different color by using the same tag inside each <td>, <th>, and each <tr> you'd like to have a different color.

What if you want to change the color of the font? Let's use the style tag inside this, just like we did with the images. So, let's say we want our pink table to have red letters. The code will look like this:



<table style="color:red;" bgcolor="pink" align="center" border="1">
<tr>
<th colspan="4" >
Evolution</th>
</tr>
<tr>
<th>Pokémon</th>
<td>Vaporeon</td>
<td>Jolteon</td>
<td>Flareon</td>
</tr>
<tr>
<th>Stones</th>
<td>Water Stone</td>
<td>Thunder Stone</td>
<td>Fire Stone</td>
</table>


And, your table will now appear this way:
Evolution
Pokémon Vaporeon Jolteon Flareon
Stones Water Stone Thunder Stone Fire Stone



Now, each time we have used the border="1" property inside our table tag. What if you didn't want a border or wanted a thicker border? It is as simple as setting that to 0 for none and a higher number for a thicker border.

We have also centered the table each time, and you do not have to. You can change the align="center" to "right" or "left," as well.

Right now the size is standard, but you can change each cell size to be larger. If you wanted, for instance, to make the titleheader that says "Evolution" to be 80 pixels tall/high, you would add height="80px" inside of the <th> tag.

What if we wanted to make the border disappear and the table align, but the title text align center? Your code would now look as follows:


<table style="color:red;" bgcolor="pink" align="right" border="0">
<tr>
<th colspan="4" height="80px" text-align="center">
Evolution</th>
</tr>
<tr>
<th>Pokémon</th>
<td>Vaporeon</td>
<td>Jolteon</td>
<td>Flareon</td>
</tr>
<tr>
<th>Stones</th>
<td>Water Stone</td>
<td>Thunder Stone</td>
<td>Fire Stone</td>
</table>


And, this is how your table would look:


Evolution
Pokémon Vaporeon Jolteon Flareon
Stones Water Stone Thunder Stone Fire Stone






Hopefully, this has helped you get the hang of basic table coding.