Tables in HTML - HTML Tutorial - Web Application Development

Since 2008 most of web page layouts used to built on tables before Div and CSS came into action completely. But later the advantage of CSS and div based layout helped developers make layouts quickly. With better design and style as well.

But HTML tables are still very popular and almost part of every web page which presents data. HTML tables helps you to present data in columns and rows form effectively.

HTML tables allow web developers to arrange data into rows and columns.

How to define a HTML table?

The <table> tag defines an HTML table. Which ends with </table> inside there are different parts.

<thead> which ends with </thead> contains the head section of table.
Inside header a <tr></tr> defines the row in heading section.
<th> defines the table heading and works like a cell in the row or column
By default, the text in <th> elements are bold and centered.

Similarly to <thead> the <tbody> keeps the content of table the actual rows and columns. In which rows are defined like <tr> and the columns in it <td>.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag. By default, the text in <td> elements are regular and left-aligned.

Let’s take a look to example HTML table.

<table border="1px" cellspacing="3px" cellpadding="10px">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Abdul</td>
<td>Rehman</td>
<td>Lahore</td>
<td>Punjab</td>
</tr>
<tr>
<td>2</td>
<td>Ateeq</td>
<td>Rafeq</td>
<td>Lahore</td>
<td>Punjab</td>
</tr>
<tr>
<td>3</td>
<td>Ateeq</td>
<td>Rafeq</td>
<td>Lahore</td>
<td>Punjab</td>
</tr>
<tr>
<td>4</td>
<td>Ateeq</td>
<td>Rafeq</td>
<td>Lahore</td>
<td>Punjab</td>
</tr>
</tbody>
</table>

In above code you can see the table starts with <table> then headings row comes inside <thead> and data rows comes inside <tbody>.

The additional things cellpadding which is padding with borders of cells inner. And cellspacing which is margin between cells from each other.

To understand better check Difference between cellpadding and cellspacing.

HTML table Layout Example

Yes you can still make simple web page layouts with HTMl. See one example below. Which have very simple style to adopt. Its very easy to make the table layout for web page. But better you use the nested tables instead of rowspan and cellspan.

Using rowspan and Cellspan in the beginning can be confusing.

HTML table layout Code — The layout you would get from following code.

<table align="center" width="800px" border="0px" cellpadding="0px" cellspacing="0px">
<tbody>
<tr>
	<td height="150px" style="background-color:#EACF10;">
		<img src="images/table_layout.jpg" alt="Table Layout Header" />
	</td>
</tr>
<tr>
	<td height="450px" style="background-color:#f7f7f7;">
	
		<table vertical-align="top" height="450px" border="0px" cellpadding="0px" cellspacing="0px" width="100%" >
			<tr>
				<td width="25%" style="background-color:#ededed;vertical-align:top;padding:20px;">
					<ul>
						<li><a href="home.html">Home Page</a></li>
						<li><a href="about.html">About Us</a></li>
						<li><a href="contact.html">Contact Us</a></li>
						<li><a href="location.html">Location</a></li>
					</ul>
				</td>
				<td width="75%" style="padding:20px;">
					<h1>Home - Table Layout</h1>
					
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a enim arcu. Nam tincidunt ipsum tellus. Ut eu est at libero aliquet egestas sit amet vel libero. Curabitur consectetur sapien nisl, nec luctus eros molestie sit amet. Nam in felis interdum, posuere elit vel, efficitur arcu. Proin eu mauris euismod, vehicula dolor at, tristique tortor. Ut eleifend enim at leo convallis luctus. Aliquam quam nunc, tristique nec vulputate nec, malesuada quis lacus. Morbi porta metus sem, vel ultrices erat gravida ac. Praesent posuere semper odio, non malesuada nulla. Curabitur suscipit tortor eu vestibulum commodo. In at rhoncus est, non facilisis felis.</p>

					<p>Etiam porta congue mi eget aliquet. Fusce id eros rhoncus, pharetra nibh sed, sodales felis. Mauris ac ullamcorper augue. Suspendisse potenti. Integer semper pharetra odio vitae aliquet. Praesent molestie, elit in sollicitudin placerat, leo nibh malesuada velit, sed congue erat velit eu mauris. Integer luctus erat vel enim consectetur, nec tempor mauris tristique. Nulla arcu magna, scelerisque nec sodales sit amet, euismod et ante. Duis laoreet dignissim lorem. Donec et fringilla libero. Morbi in ante elit. Mauris pellentesque hendrerit rutrum. Fusce egestas faucibus dui, sed ultrices nunc volutpat in. Donec tortor tortor, commodo posuere urna in, imperdiet congue sapien.</p>
					
				</td>
			</tr>
		</table>
	
	</td>
</tr>
<tr>
	<td height="50px" style="background-color:#A03A24;text-align:center;color:#FFF;">
		<ul style="list-style:none;">
			<li style="display:inline-block;"><a href="home.html">Home Page</a></li>
			<li style="display:inline-block;"><a href="about.html">About Us</a></li>
			<li style="display:inline-block;"><a href="contact.html">Contact Us</a></li>
			<li style="display:inline-block;"><a href="location.html">Location</a></li>
		</ul>
		
		Copyright 2021 
	</td>
</tr>
</tbody>
</table>

Conclusion

As we have established the usages of HTML table layouts is almost deprecated. But still tables are widely used to present several types of data in almost every web page. If you are looking though analytics list of customers and any other types of tabled data. Don’t forget those are made in tables. So the tables are not now used to make the layouts of web pages. But tables are still in use to present data in columns and rows form. Please watch the video for complete tutorial below.