How to merge table cells in HTML?-HTML Tutorial-php.cn

How to merge table cells in HTML?

王林

Release： 2023-09-10 16:09:04

forward

3030 people have browsed it

How to merge table cells in HTML?

We use colspan and rowspan attributes to merge cells in HTML. The rowspan attribute specifies the number of rows into which cells should be merged, while the colspan attribute is used to specify the number of columns into which cells should be merged.

This attribute should be placed inside the

tag.

grammar

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

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

Copy after login

Example

The following is a sample program to merge table row cells in HTML.

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

Copy after login

Use colspan attribute

We can merge the column cells of the table using the following syntax.

grammar

For colspan, we use the following syntax.

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

Copy after login

Example

The following is a sample program to merge table column cells in HTML.

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

Copy after login

Example

The following is our sample program to perform rowspan and colspan on an HTML table.

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td >Tharun</td>
         <td rowspan="2">Content writer</td>
      </tr>
      <tr>
         <td >Akshaj</td>
      </tr>
      <tr>
         <td colspan="2">Welcome to the company</td>
      </tr>
   </table>
</body>
</html>

Copy after login

The above is the detailed content of How to merge table cells in HTML?. For more information, please follow other related articles on the PHP Chinese website!