Merging HTML Table Cells using COLSPAN and ROWSPAN
One of the examples above uses COLSPAN to merge cells across the header, another uses one cell per data placeholder. TR stands for Table Row and TD stands for Table Data, remember? Well, we can extend the table functionality and merge multiple column cells using the attribute called COLSPAN inside the TD tag. We can also merge rows of data using ROWSPAN attribute of the same TD tag. Note that ROWSPAN is used inside the TD tag, not inside TR (Table Row) tag. Let’s consider the following code example:
Example of COLSPAN merging two columns of table cells into one!
<table border ="1">
<tr>
<td colspan = "2">This is one long column above</td>
</tr>
<tr>
<td>This is the left column</td>
<td>This is the right column</td>
</tr>
</table>
And this is how the code above will be rendered in your browser:
| This is one long column above | |
| This is the left column | This is the right column |
Notice the first row is merged across two columns below. In the following example, let’s create a table which will use the ROWSPAN attribute to create one long row spanning across two rows of space:
<table border = "1">
<tr>
<td rowspan = "2">This is one long row on the left hand side of the table</td>
<td>Column Number 1</td>
</tr>
<tr>
<td>Column Number 2</td>
</tr>
</table>And again, this is how this table will appear in your browser:
| This is one long row on the left hand side of the table | Column Number 1 |
| Column Number 2 |
While most of the tables you will create will be of trivial design, the code examples above are enough to get you started. If you are looking for more complex
Because HTML tables are constructed automatically based on user input, it takes time to play around with different variations of colspan and rowspan values to figure out how it works. Spend some time changing values in the example above to see how it affects the table, add more cells. . . experiment!
Learn to make websites yourself. Receive unique HTML tutorials for beginners from Greg, the author of this HTML article and many others. This content is not publically available on the website.
Thanks for visiting websitehomework.com - an website containing html tutorials covering topics such as how to make websites from scratch, css, javascript and other website-related subjects.