Ukieweb

Class Notes

Notes for Students

HTML Tables

Tables are widely used in website design for displaying grouped data in the table format. Historically they have been used to structure website's layout. This method, while can be effective and simple, causes issues with the flexibility of tables.

Structure of a table

When we look at a tables, they can be split into two sections, rows and columns. There is a specific tag for a table row, <tr> and </tr>. Columns also have tags which are <td> and <td>.

Creating a table

When it comes to tables in html, columns are included inside rows, so this means that we must use the row first. You can see this in the example below

<table>
    <tr>
    	<td>Cell A</td>
    	<td>Cell B</td>
    	<td>Cell C</td>
	</tr>
	<tr>
    	<td>Cell D</td>
    	<td>Cell E</td>
    	<td>Cell F</td>
	</tr>
</table>
Cell A Cell B Cell C
Cell D Cell E Cell F
As you can see above, while this is technically a table, it doesn't really look like a table as it's missing the borders.

Adding a border

Adding a border to a table is very straight forward, it's as simple as adding a border attribution. This will look something like <table border="1">.

Activity

Below is an activity to test your HTML knowledge so far. Give it a try.

<html>
	<head>
		<title>Sample Page</title>
	</head>

	<body>

	</body>
</html>
Exercises
  1. Create a table
  2. Add 3 rows to your table
  3. Add 2 columns to each row
  4. Add a border to your table