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

Detailed explanation of publicPath usage in Webpack

Table of contents output output.path output.publi...

Detailed explanation of JavaScript progress management

Table of contents Preface question principle test...

How to use mixins in Vue

Table of contents Preface How to use Summarize Pr...

Linux concurrent execution is simple, just do it this way

Concurrency Functions time for i in `grep server ...

Detailed explanation of MySql slow query analysis and opening slow query log

I have also been researching MySQL performance op...

What is MIME TYPE? MIME-Types type collection

What is MIME TYPE? 1. First, we need to understand...

Solve the problem of not finding NULL from set operation to mysql not like

An interesting discovery: There is a table with a...

Two solutions for automatically adding 0 to js regular format date and time

Table of contents background Solution 1 Ideas: Co...

CentOS8 network card configuration file

1. Introduction CentOS8 system update, the new ve...

JavaScript to implement limited time flash sale function

This article shares the specific code of JavaScri...

Solution to the VMware virtual machine prompt that the exclusive lock of this configuration file failed

After VMware is abnormally shut down, it prompts ...

Understanding the CSS transform-origin property

Preface I recently made a fireworks animation, wh...

Summary of knowledge points on using calculated properties in Vue

Computed properties Sometimes we put too much log...

Linux operation and maintenance basic process management and environment composition analysis

Table of contents 1. Basic overview of the proces...

Detailed graphic tutorial on installing centos7 virtual machine in Virtualbox

1. Download centos7 Download address: https://mir...