How To Merge Table Columns In HTML? - Tutorialspoint

Trang chủ » Html Column » How To Merge Table Columns In HTML? - Tutorialspoint

Có thể bạn quan tâm

How to merge table columns in HTML? HTMLWeb DevelopmentFront End Technology

To merge table columns in HTML use the colspan attribute in <td> tag. With this, merge cells with each other. For example, if your table is having 4 rows and 4 columns, then with colspan attribute, you can easily merge 2 or even 3 of the table cells.

Example

You can try to run the following code to merge table column in HTML. Firstly, we will see how to create a table in HTML with 3 rows and 3 columns

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

Output

Example

Let’s merge columns using the colspan attribute. The first 2 columns will merge

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

Output

Anjana Anjana Updated on: 02-Sep-2023

62K+ Views

Từ khóa » Html Column