What do table rowspan and colspan mean in HTML?-HTML Tutorial-php.cn

What do table rowspan and colspan mean in HTML?

王林

Release： 2023-08-31 23:33:05

forward

2790 people have browsed it

rowspan and colspan are attributes of the

tag. These are used to specify the number of rows or columns into which cells should be merged. The rowspan attribute is used to merge rows and the colspan attribute is used to merge columns of a table in HTML.

These attributes should be placed inside the

tag as shown below -

What do table rowspan and colspan mean in HTML?

grammar

The following is the syntax for merging table cells in HTML -

<td rowspan="2">cell data</td>
<td colspan="2">cell data</td>

Copy after login

Example 1 - Setting Row Span

Now let's look at an example where the row span of one of the columns is set to 2.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      table,
      tr,
      th,
      td {
         border: 1px solid black;
         padding: 20px;
      }
   </style>
</head>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th>First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td></td>
         <td rowspan="2"></td>
      </tr>
      <tr>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

Copy after login

The following is the output of the above example program

Example 2 - Setting colspan

An example of merging table column cells in HTML is given below.

<!DOCTYPE html>
<html>
<style>
   table,tr,th,td {
      border:1px solid black;
      padding: 20px;
   }
</style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td colspan="2" ></td>
      </tr>
      <tr>
         <td ></td>
         <td></td>
      </tr>
      <tr>
         <td colspan="2"></td>
      </tr>
   </table>
</body>
</html>

Copy after login

The following is the output of the above example program.

Example 3

Here is another example of merging rows and columns by setting the values of the rowspan and colspan properties in a single program

<html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
         width: 100px;
         height: 50px;
      }
   </style>
</head>
<body>
   <h1>Heading</h1>
   <table>
      <tr>
         <td colspan="2" ></td>
      </tr>
      <tr>
         <td ></td>
         <td></td>
      </tr>
      <tr>
         <td colspan="2"></td>
      </tr>
   </table>
</body>
</html>

Copy after login

The following is the output of the above example program.

The above is the detailed content of What do table rowspan and colspan mean in HTML?. For more information, please follow other related articles on the PHP Chinese website!