Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make a display in a horizontal row?
In this article, the user will understand how to make a display in a horizontal row in the HTML. This can be easily done by using “display: inline” feature while setting the style or by using the table row feature. This process of displaying some elements of a webpage in a row is demonstrated. First, the method is given where the unordered list items are displayed in a row. In the second example, the paragraph lines are displayed in a row. In the third example, images of different sizes are used to display these in a row.
Example 1: Using HTML to display the unordered list items in a horizontal row
Design Steps
Step 1 − Make an HTML file and start writing the code.
Step 2 − Make a <center> tag within the <body>.
Step 3 − Now within the <center> tag, make a <div> tag with the class name as “tab”.
Step 4 − Make a <style> tag and specify the style for .tab.
Step 5 − Try using a light background-color, a border with 1px solid and a dark color, 400px width and 50px height.
Step 6 − Make style for <li> tags and use “display: inline” and somi.
Step 7 − Now within the div tag make the unordered list. Open html file in a browser and check the result.
File Used : HRowDisplay1.html
Code For HRowDisplay1.html
<!DOCTYPE html>
<html>
<head>
<title>Display in a horizontal row</title>
<style>
.tab {
border: 1px solid #382d2d;
background-color: #e0dbdb;
width: 400px;
height: 50px;
}
li {
display: inline;
word-spacing: 25px;
}
</style>
</head>
<body>
<center>
<h2>Display List Items in a horizontal row</h2>
<div class="tab">
<ul>
<li>
Name:-Hina
</li>
<li>
Age:-40
</li>
<li>
Lives_in:-UP
</li>
</ul>
</div>
</center>
</body>
</html>
Example 2: Using HTML to display the paragraph lines in a horizontal row
Design Steps
Step 1 − First make a file called HRowDisplay2.html and then write the code in it.
Step 2 − To center the item, make a <center> tag within the <body>. Now within the <center> tag, for a container, make a <div> tag.
Step 3 − Now within the <div> tag, create a <table> tag and give it a class name as “tab”.
Step 4 − To set the style a class tag is made using <style> tag and then specify the style for .tab.
Step 5 − Use the value #e0dbdb as the background-color, border with 1px solid and a dark color, set 600px width and 50px height.
Step 6 − Make four paragraph tags before the div tags and write the text content in these tags.
Step 7 − Make <tr> tag and four <th> tags in the <tr> tag. Now put the copy of the same <p> tags used above in each of the <th> tag.
Step 8 − Open html file in a browser and check the result.
File Used : HRowDisplay2.html
Code For HRowDisplay2.html:
<!DOCTYPE html>
<html>
<head>
<title>Display in a horizontal row</title>
<style>
.tab {
border: 1px solid #382d2d;
background-color: #e0dbdb;
width: 600px;
height: 50px;
}
</style>
</head>
<body>
<center>
<h2>Displaying Lines</h2>
<p>This is line One</p>
<p>This is line Two</p>
<p>This is line Three</p>
<p>This is line Four</p>
<div>
<h2>Display Lines in a horizontal row</h2>
<table class="tab">
<tr>
<th>
<p>This is line One</p>
</th>
<th>
<p>This is line Two</p>
</th>
<th>
<p>This is line Three</p>
</th>
<th>
<p>This is line Four</p>
</th>
</tr>
</table>
</div>
</center>
</body>
</html>
Example 3: Using HTML to display the images in a horizontal row
Step 1 − Make a file called HRowDisplay3.html and start writing the code in this file.
Step 2 − To centralize the items within the body tag, make a <center> tag.
Step 3 − Also make a <div> tag with “tab” as its class name.
Step 4 − To set the style for the class .tab, make a <style> for this.
Step 5 − Try using this hexadecimal color “#e0dbdb” for the background-color, border with 1px solid and a dark color, 80% width and 50% height.
Step 6 − Make style for <img> tags and use “display: inline” feature.
Step 7 − Now within the div tag put the <img> tags with images of different sizes. Open html file in a browser and check the result.
File Used : HRowDisplay3.html
Code For HRowDisplay3.html
<!DOCTYPE html>
<html>
<head>
<style>
.tab {
border: 1px solid #382d2d;
background-color: #e0dbdb;
width: 80%;
height: 50%;
}
img {
display: inline;
}
</style>
</head>
<body>
<div></div>
<body>
<center>
<h2>Display Images in a horizontal row</h2>
<div class="tab">
<img src="https://www.tutorialspoint.com/assets/questions/media/14186/play.jpg" />
<img src="https://www.tutorialspoint.com/assets/questions/media/14186/play.jpg" />
<img src="https://www.tutorialspoint.com/assets/questions/media/14186/play.jpg" />
<img src="https://www.tutorialspoint.com/assets/questions/media/14186/play.jpg" />
</div>
</center>
</body>
</html>
Conclusion
In this HTML article, using three different examples, the ways to show how to display the webpage elements in a horizontal row, are given. In the first example, an unordered list is shown in a horizontal row. In the second example, paragraph lines are put inside the <th> tags in a table and displayed in a row. In example three, different sizes of images are taken and displayed in a horizontal row.
486 Views
To Continue Learning Please Login