HTML Tables: How to use Colspan and Rowspan:

As a software developer, I realized a long time ago that the path to evolve and grow in my area is full of new things to learn, and that my eternal co-worker will be Google, who is always there to answer all my questions.

Being part of an industry that is in constant development supposes continuous learning as an extra task, since in each new project there is a large space to meet something unknown, with something new for our brain, and that will undoubtedly bring a benefit to our skills and qualities that make us good at what we do.

Since this is already part of my path as a software developer, it was no surprise when I first heard the term "Colspan" talking about HTML, which was totally new to me. So I take the opportunity to write this informative article, on a subject that has also been 100% unknown to me.

As I have already said, Google, my favorite work colleague, helped me to clarify my doubts, and here I am going to compile the information I found about this new work tool, in a language that both newbies and those of us who already have been here for years can understand.

For starters, Colspan is a word that is almost always accompanied by Rowspan, and both are HTML attributes that make it easy to create tables in our projects.

Let's review the concepts related to what is Colspan, what is Rowspan, how to build tables in HTML, and how to combine cells in HTML.

What is Colspan?

In its simplest definition, colspan is an HTML attribute that defines the number of columns a cell will have in a table. In this way, we can merge consecutive cells to their right to have a column of the size we require, it allows us to merge columns to make the table understandable.

It is used in a td tag to set the amount in the specific number of columns that you want to apply in the table.

<td colspan = "number">

What is Rowspan?

This attribute is the analog of Colspan, but to define the number of rows, that is, with Rowspan we establish the number of rows that we want to merge in our table, in this way, the rows are merged down according to the number that we have written.

It is used in the same way as the previous one, but differentiating it by its name.

<td rowspan = "number">

These two elements are in charge of displaying the tables with the appropriate formal configuration in our layout and allow us to enter data in an orderly manner.

How to build tables in HTML?

Tables are a tool for data visualization, in a dynamic and systematized way. They allow us to display information in an easy-to-digest, understandable and fast way, which works easier than displaying everything in a long and boring text document.

This format is common and easy to build due to its popularity and the benefits it provides when explaining a topic, creating lists, or keeping your data in order.

In HTML, you can build your tables as you already know them, with cells, columns, rows, and you can also play with their attributes to generate more efficient and understandable tables.

One way to create a basic and standard table, for when you have to show uniform data, without many variables, would be the following:

1. To define the table you use the <table> element that you will also use to close it when you finish it.

2. To set each row that you want to be seen in your table, you use <tr> </tr> as many times as necessary, for example, if you want 5 rows you will have to write it 5 times. As for the columns, they will be defined using <td> </td>

3. Once you have the basic sketch of your table, you must wrap your rows with a <tbody> </tbody> so that your information is visible within each cell previously established.

4. The Colspan and Rowspan attributes come into your code when you want to display data that is a little more difficult to graph, where it is necessary to merge rows or columns so that the information is understood correctly.

How to combine cells in HTML?

Colspan and Rowspan are in charge of defining how many cells occupy the rows and columns of your table, by default each one has a value of 1 <td rowspan = 1> or <td colspan = 1>, but if you want to extend it you just have to change the number to expand your cell vertically (columns) or horizontally (rows).

HTML has been the beginning in the world of programming for almost all of us in the sector. However, after years of experience, there are unknown aspects of this language.

Tables are a basic and necessary aspect of your projects. To facilitate its construction we have a whole series of attributes that allow us to make the image we have in our sketches and heads a reality about how we want our website to be.

What other attributes do you know? What is the most useful for you?

Comment on the one that has helped you the most in your projects in the comments of the blog, we can also start a conversation through my social networks Twitter @BarnuevoLeo and LinkedIn Leo J. Barnuevo.