HTML Tables

 A table is another way of listing organized data. A table has rows and columns. Lets make a table now.

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>My Table</title>

</head>

<body>


<table>

 

</table>


</body>

</html>

A table has a start and end tag. But we need some information to put into our table. Lets add our table's headings.

 <!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>My Table</title>

</head>

<body>


<table>

 <tr>

    <th>Game Engine</th>

    <th>Web Site</th>

    <th>Completely Free</th>

  </tr>

</table>


</body>

</html>

The <tr> element is our first row in the table. The <th> elements are our table's column headings.

Lets add some more rows.  

 <!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>My Table</title>

</head>

<body>


<table>

 <tr>

    <th>Game Engine</th>

    <th>Web Site</th>

    <th>Completely Free</th>

  </tr>

<tr>

    <td>Construct3</td>

    <td>https://www.construct.net</td>

    <td>No</td>

  </tr>

  <tr>

    <td>Godot</td>

    <td>https://godotengine.org</td>

    <td>Yes</td>

  </tr>

  <tr>

    <td>Unreal</td>

    <td>https://www.unrealengine.com</td>

    <td>No</td>

  </tr> 

</table>


</body>

</html>

We did it. We made a table. Lets see what it looks like.

 

Game Engine Web Site Completely Free
Construct3 https://www.construct.net No
Godot https://godotengine.org Yes
Unreal https://www.unrealengine.com No

Wow. That is really boring. Lets add some CSS code to style our table.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Table</title>
</head>

<body>

<style>
table{
  border-width: 5px;
  border-style: double;
}
th{
  border-width: 3px;
  border-bottom-style: solid;
  background-color: lightblue;
}
td.no{
  color: red;
}
td.yes{
  background-color: lightgreen;
}
</style>

<table>
  <tr>
    <th>Game Engine</th>
    <th>Web Site</th>
    <th>Completely Free</th>
  </tr>
  <tr>
    <td>Construct3</td>
    <td>https://www.construct.net</td>
    <td class="no">No</td>
  </tr>
  <tr>
    <td>Godot</td>
    <td>https://godotengine.org</td>
    <td class="yes">Yes</td>
  </tr>
  <tr>
    <td>Unreal</td>
    <td>https://www.unrealengine.com</td>
    <td class="no">No</td>
  </tr>
</table>

</body>
</html>

And now lets see what we made.


Game Engine Web Site Completely Free
Construct3 https://www.construct.net No
Godot https://godotengine.org Yes
Unreal https://www.unrealengine.com No

Hey, that's more like it. I hope you have had as much fun as I did making this table with you.

In the next tutorial, we will learn how to add a custom icon to your web page.



Comments

Post a Comment

Popular Posts