How To Use DL, DT And DD HTML Tags To List Data vs Table List Data

How To Use DL, DT And DD HTML Tags To List Data vs Table List Data

Many past web designers would love to create web design using table and it has been the Achilles point for web developers when it comes to debugging. Now, however when it come to listing data on a web page, example listing data of a profile, many people would use a HTML table instead.

In fact, by using HTML dl, dt, dd tags, you will save on writing more codes and add more semantic value to the content. Whereas table are best use for tabular data, and should not be use in listing data, web form or web layout.

How To Use DL, DT And DD HTML Tags To List Data vs Table List Data

[tut demo=”https://onextrapixel.com/examples/dl-tags-vs-table/” download=”https://onextrapixel.com/examples/css-rollover-display-element/css-rollover-display-element.zip”]

Using HTML DL, DT, DD Tags

If you are still creating list data using table, look below and compare on how to make your life easier with HTML dl, dt, dd tags.

DL, DT, DD Tags vs Table

It may both look identical, but look closely behind the codes.

Table List Data

A typical listing data using table can be as follow. First we have a tr table row to hold the title and the data td table cell. Then when we need to style the title element, we will need to give a class to that td table cell.

<table>
	<tr>
		<td class="title">Name: </td>
		<td class="text">John Don</td>
	</tr>
	<tr>
		<td class="title">Age: </td>
		<td class="text">23</td>
	</tr>	
	<tr>
		<td class="title">Gender: </td>
		<td class="text">Male</td>
	</tr>		
	<tr>
		<td class="title">Day of Birth:</td>
		<td class="text">12th May 1986</td>
	</tr>
</table>

So over here in the CSS, we style the title class that we had declare in the HTML.

/*TABLE LIST DATA*/
table {
	margin-bottom:50px;
}

table tr .title {
	background:#5f9be3;
	color:#fff;
	font-weight:bold;
	padding:5px; 
	width:100px;   
}

table tr .text {
	padding-left:10px;
}

From here you can see that if you want to change the design or format for the title in the CSS, you will need to give each td for the title a class. If you want to style the data as well, you will need to give a class to it as well, so you are actually writing a lot of codes. More codes mean larger file size to download, more chances for bugs and harder for you to maintain.

DL, DT, DD List Data

Now, let’s look at using HTML dl, dt, dd tags for listing the data. First we have the dl (definition list) tag to hold the whole set of data, next we have dt (defines the item in the list) tag and dd (describes the item in the list) tag to hold the title and the data.

<dl>			
	<dt>Name: </dt>
	<dd>John Don</dd>
			
	<dt>Age: </dt>
	<dd>23</dd>
				
	<dt>Gender: </dt>
	<dd>Male</dd>
				
	<dt>Day of Birth:</dt>
	<dd>12th May 1986</dd>
</dl>

Over at CSS, we will need to float the dt tag, so that the title for the list data will align to the left. The rest of the styling is up to you.

/*DL, DT, DD TAGS LIST DATA*/
dl {
	margin-bottom:50px;
}

dl dt {
	background:#5f9be3;
	color:#fff;
	float:left; 
	font-weight:bold; 
	margin-right:10px; 
	padding:5px;  
	width:100px; 
}

dl dd {
	margin:2px 0; 
	padding:5px 0;
}

From dl, dt, dd tags example, you can see that the codes are lesser, sleeker and much more semantic.

[tut demo=”https://onextrapixel.com/examples/dl-tags-vs-table/” download=”https://onextrapixel.com/examples/css-rollover-display-element/css-rollover-display-element.zip”]

Conclusion

So if you are still using table to consolidate or list your data on the web form and web layout, it’s really time now to make the switch. It’s definitely going to make your life a lot more easier.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.