Detailed explanation of the solution to the problem of merging rows and columns in tables in HTML

Detailed explanation of the solution to the problem of merging rows and columns in tables in HTML

Because we were going to build a website, in addition to long paragraphs of text, the content also included a large number of tables, which led to the problem of table layout.

A simple table such as:

This form is relatively simple, just simply <tr></tr><td></td> (or <th></th>

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a target=_blank href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
td{width:200px;
   height:100px;
   border:#000 2px solid;
   margin:0px;
   padding:0px;
}
</style>
</head></p><p><body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

However, when there are some uneven spaces, you need to use colspan (across columns) and rowspan (across rows).

colspan (across columns) and rowspan (across rows) have the same meaning as the surface meaning, and can also be seen as the merging of rows and columns.

colspan (across columns):

The red part in the above picture indicates that the cell has spanned two columns.
The code is as follows (only part of the code):

<table>
<tr>
<td colspan="2" style="background:#F00"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

If you want such a neat table, you must first estimate the number of cells in the row below the row where the cell to be spanned is located, which determines the number of cells to be spanned.

Taking the above picture as an example, the number of grids in the second and third rows is 3. So if you want to achieve the effect in the above picture, the first row and the first column want to span two columns, so colspan="2"

The rowspan (across rows) method is similar to colspan (across columns).

Examples of rowspan (across rows) and colspan (across columns) appearing at the same time:

The code is as follows (only part of the code):

<table>
<tr>
<th></th>
<th colspan="5"></th>
</tr>
<tr>
<th></th>
<th <span style="color:#000000;">colspan</span>="3"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th rowspan="3"></th>
<th></th>
<th colspan="2"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th colspan="2"></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th colspan="2"></th>
<th></th>
<th></th>
</tr>
</table>
<table>
<tr class="zj">
<th rowspan="4"></th>
<th colspan="8"></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th colspan="4"></th>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<th></th>
<th colspan="7"></tr>
</table>

This is the end of this article on how to solve the problem of merging rows and columns in html tables. For more information about merging rows and columns in html tables, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Understanding and solutions of 1px line in mobile development

>>:  How to use Typescript to encapsulate local storage

Recommend

Windows uses VMware to create a Linux virtual machine and install the CentOS7.2 operating system

Table of contents 1. Follow the wizard to create ...

JavaScript selector functions querySelector and querySelectorAll

Table of contents 1. querySelector queries a sing...

How to obtain a permanent free SSL certificate from Let's Encrypt in Docker

1. Cause The official cerbot is too annoying. It ...

MySQL 5.7 cluster configuration steps

Table of contents 1. Modify the my.cnf file of se...

How to use skeleton screen in vue project

Nowadays, application development is basically se...

Implementing shopping cart function based on vuex

This article example shares the specific code of ...

Teach you step by step to develop a brick-breaking game with vue3

Preface I wrote a few examples using vue3, and I ...

Web page comments cause text overflow in IE

The experimental code is as follows: </head>...

Vue Beginner's Guide: Creating the First Vue-cli Scaffolding Program

1. Vue--The first vue-cli program The development...

Mysql slow query optimization method and optimization principle

1. For comparison of date size, the date format p...

MySQL multi-instance installation boot auto-start service configuration process

1.MySQL multiple instances MySQL multi-instance m...

Detailed explanation of the solution to image deformation under flex layout

Flex layout is a commonly used layout method nowa...

MySql 8.0.11 installation and configuration tutorial

Official website address: https://dev.mysql.com/d...

Low-version Druid connection pool + MySQL driver 8.0 causes thread blocking and performance limitation

Table of contents Phenomenon Root Cause Analysis ...

The meaning and calculation method of QPS and TPS of MySQL database

When doing DB benchmark testing, qps and tps are ...