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 Do I Make It So My Table Doesn't Format "Wrong" In HTML?
There is a well-supported, little-known, and incredibly helpful CSS attribute for tables. It alters how tables are shown so that you can have a more reliable, consistent layout. Making the table in the proper format was beneficial because it makes the webpage more user-friendly and helpful for the user to understand the information in the table more clearly.
This article will teach you how to prevent the table from formatting "wrong" in HTML. Before we dive into the article, let’s have a quick view of the tables in HTML.
HTML Table
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
Syntax
Following is the syntax for HTML table
<table>…</table>
Consider the following examples to get a better idea of how to avoid "wrong" HTML table formatting.
Example
In the following example, we use CSS in conjunction with the table height mentioned earlier to avoid "wrong" table formatting.
<!DOCTYPE html>
<html>
<body>
<style>
table, td {
width: 100%;
border: 2px solid #82E0AA ;
border-collapse: collapse;
}
td {
height: 52px;
width: 52%;
}
td[rowspan="2"] {
height: 110px;
}
</style>
<table>
<tbody>
<tr>
<td colspan="2">1.MSD</td>
</tr>
<tr>
<td rowspan="2">2.VIRAT</td>
<td>3.YUVI</td>
</tr>
</tbody>
</table>
</body>
</html>
When the script gets executed, it will generate an output consisting of a table with filled-in data inside that is displayed on the webpage in the correct format.
Example
Considering the following example, where we want the image as the background image for the table, we are going to add this with the help of CSS to avoid the table formatting being "wrong."
<!DOCTYPE html>
<html>
<body>
<table border = "2" bordercolor = "#BB8FCE" background = "https://www.tutorialspoint.com/images/asp.net_mvc_icon.svg">
<tr>
<th>Stream</th>
<th>Course</th>
<th>Amount</th>
</tr>
<tr>
<td rowspan = "2">Technical</td>
<td>HTML</td><td>6000</td>
</tr>
<tr>
<td>JAVA</td>
</tr>
</table>
</body>
</html>
On running the above code, the output window will pop up, displaying the table along with data and an image added as the background to the table displayed on the webpage.
Example
Let’s look at the following, where we are making the table of our required format with the help of table height and width to avoid "wrong" table formatting.
<!DOCTYPE html>
<html>
<body>
<table border = "2" bordercolor="#CCCCFF" width = "300" height = "100">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
When the script gets executed, it will generate an output consisting of a table drawn on the table with the required format applied with CSS displayed on the webpage.
86 Views
