How can I prevent my HTML table from being formatted incorrectly?-HTML Tutorial-php.cn

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

WBOY

Release： 2023-08-19 21:21:24

forward

1177 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!