search

Home >Web Front-end >HTML Tutorial >How can I prevent my HTML table from being formatted incorrectly?

How can I prevent my HTML table from being formatted incorrectly?

WBOY
WBOYforward
2023-08-19 21:21:241178browse

How can I prevent my HTML table from being formatted incorrectly?

There is a well-supported but little-known, extremely useful CSS property that applies to tables. It changes the way tables are displayed so you can have a more reliable, consistent layout. Formatting tables appropriately is beneficial as it makes the web page more user-friendly and helps users understand the information in the table more clearly.

This article will teach you how to prevent table formatting "errors" in HTML. Before we dive into this article, let’s take a quick look at tables in HTML.

HTMLTable

HTML tables are created using the

tag, where the tag is used to create table rows and the
tag is used to create data cells. Elements under default to normal text and are left aligned.

HTML tables allow web page authors to arrange text, images, links, other tables and other data into cells in rows and columns.

Syntax

The following is the syntax of HTML table

<table>…</table>

Consider the following example to better understand how to avoid "wrong" HTML table formatting.

Example

In the example below, we use CSS in conjunction with the previously mentioned table height 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 is executed, it will generate an output containing a table populated with data, in the correct format for display on the web page.

Example

Consider the following example, we want to have an image as the background image of a table, we will add it using CSS to avoid "bugs" with the table format. 

<!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>

After running the above code, the output window will pop up showing the image containing the data and added as background to the table displayed on the web page.

Example

Let's take a look at the following, we will use the height and width of the table to make the table in the format we need 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 is executed, it generates an output containing a table drawn on the web page with CSS applied in the desired format.

The above is the detailed content of How can I prevent my HTML table from being formatted incorrectly?. For more information, please follow other related articles on the PHP Chinese website!

css html table td tr
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How do I return a string representing a source of equivalent date objects?Next article：How do I return a string representing a source of equivalent date objects?

Related articles

See more