HTML Essential Training

When to Use Tables

Tables in HTML actually have something of a bad reputation and you may hear people say that these should be avoided. This stems from the days when it was quite hard to layout a web page as you might want to and people would overcome this by using a table to represent different areas of the screen. For example, you might have a 3x3 table with a logo in the first column of the first row, a menu in the second column and so on. Perhaps you would have a side bar in the first column of the second and third rows and and articles in the second column of these two rows, and you might add other things into the third column. So this is definetely not data that belongs in a table, and this type of usage does give some credence to the claim that tables should not be used in HTML.

Tables should not be used to control the page layout, there are definetely better ways to do that with a combination of HTML and CSS. However, sometimes data really does belong in a table, and if it does, using a table in HTML is completely justified.

Actually, tables in HTML are really simple and that's probably why they were misused in the past. They consist of three elements. Essentially, these are the table itself, the rows and the columns, In HTML terms, the table is a <table> element. The rows are <tr> elements and these are inserted into the <table> element. The columns are either <th> elements or <td> elements. The <th> elements are used as headers and the <td> elements are used to hold the tables data.

At the moment, there is one noticeable exception to that rule and that is email. When coding this, you will often use a table simply because this can be quite complicated and using a table makes the process easier. As a general rule, you should remember that when you use elements such as <table> you are telling the browser that your data is being arranged in a tabular format, so if that makes sense, then using a table is probably the sensible option.

Building Table Rows

Most of the topic home pages on this site contain a table of LinkedIn courses. An example of this is the Web Development Page. The HTML for this page is shown below.

Before we get to that, I will briefly describe the table in question which is the first table on the Web Development Page. The table has eight rows so that is 8 <tr> elements. There are three columns so each row contains three <th> or three <tr> elements. The first row contains the headers so that row is

	<tr>
		<th>Course</th>
		<th>Lecturer</th>
		<th>Status</th>
	</tr>

Each of the rows contains a course (which links to the course in LinkedIn, the name of the lecturer and a note on the status of the course (whether I have finished it, started it or not yet started. A typical row would look like this

	<tr>
		<td><a href="https://www.linkedin.com/learning/html-essential-training-4?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c">HTML Essential Training</a></td>
		<td>Jen Simmons</td>
		<td>In Progress</td>
	</tr>	

If these were the only two rows in the table, weq could put these two rows inside a <table> element and the table is completel. In reality, we will obviously have one row for the headers and one for each row of data we need so the HTML for the full table is

	<table>
		<tr>
			<th>Course</th>
			<th>Lecturer</th>
			<th>Status</th>
		</tr>
		<tr>
			<td><a href="https://www.linkedin.com/learning/html-essential-training-4?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c">HTML Essential Training</a></td>
			<td>Jen Simmons</td>
			<td>In Progress</td>
		</tr>
		<tr>
			<td><a href="https://www.linkedin.com/learning/introduction-to-css?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c">Introduction to CSS</a></td>
			<td>Carrie Dils</td>
			<td>-</td>
		</tr>
		<tr>
			<td><a href="https://www.linkedin.com/learning/css-essential-training-3?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c">CSS Essential Training</a></td>
			<td>Christina Truong</td>
			<td>-</td>
		</tr>
		<tr>
			<td><a href="https://www.linkedin.com/learning/javascript-essential-training?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c">JavaScript Essential Training</a></td>
			<td>Morten Rand-Hendriksen</td>
			<td>-</td>
		</tr>
		<tr>
			<td><a href="https://www.linkedin.com/learning/succeeding-in-web-development-full-stack-and-front-end?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c">Succeeding in Web Development: Full Stack and Front End</a></td>
			<td>Ray Villalobos</td>
			<td>-</td>
		</tr>
		<tr>
			<td><a href="https://www.linkedin.com/learning/workflow-tools-for-web-developers?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c">Workflow Tools for Web Developers</a></td>
			<td>Christina Truong</td>
			<td>-</td>
		</tr>
		<tr>
			<td><a href="https://www.linkedin.com/learning/git-essential-training-the-basics?contextUrn=urn%3Ali%3AlyndaLearningPath%3A59370541498ec352a683231c">Git Essential Training: The Basics</a></td>
			<td>Kevin Skoglund</td>
			<td>-</td>
		</tr>
	</table>

As with forms, we have really only scratched the surface on what is possible with templates and there are courses devoted to this such as HTML: Tables