Colspan & Rowspan - The Complete HTML5 Tutorial

HTML5 Tutorial TOC Table of Contents

Download PDF

Download this entire tutorial as PDF right now - only $4.99!

Chapter/article TOC

1. Basics of Tables
2. Colspan & Rowspan
3. Thead & tbody
4. Changing Column Width

Introduction to HTML

• What is HTML?
• The Structure of HTML
• Your First Webpage

HTML Basics

• Block & Inline elements
• Attributes
• Headings
• Id's & Classes
• Links
• Images
• Lists
• Italic & Bold or Strong & Emphasize
• Blockquotes

Forms

• Introduction to Forms
• Creating Your First Form
• Grouping with the fieldset tag
• Sending the Data
• Multiline Textboxes - The textarea tag
• Radiobuttons
• Checkboxes
• Submit & Reset Buttons
• Dropdown Lists

Tables

• Basics of Tables
• Colspan & Rowspan
• Thead & tbody
• Changing Column Width

Getting Ready for HTML5

• Using HTML5 today
• Checking browser support
• Using polyfills to support HTML5

Semantic HTML5 section tags

• Introduction to Semantic HTML5 elements
• The article tag
• The header tag
• The hgroup tag
• The footer tag
• The navigation tag
• The section tag
• The aside tag
• The address tag

Form validation using HTML5

• Form validation using HTML5
• How HTML5 validation works
• Validating email addresses
• Validating URLs
• Validating phone numbers
• Validating dates
• Placeholder text
• Numbers as spinboxes
• Polyfills for form validation

• HTML5
• ASP.NET MVC
• ASP.NET WebForms
• C#
• CSS3
• JavaScript
• jQuery
• PHP5
• WPF

Tables: Colspan & Rowspan

The way the HTML markup is structured means that you in some rows can have four cells, some three cells, some two cells and so forth. In order for this to actually function, you need to use the attributes colspan and rowspan (the value of these attributes is always whole numbers). It can be quite tricky to use these attributes so you might need some patience.

Let’s use the example from the previous chapter and have the first row have just two cells instead of three and additionally merge the second cell of row three and four.

<table border="1" width="100%"> <tr> <td colspan="2">Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> <tr> <td>Row 2, cell 1</td> <td>Row 2, cell 2</td> <td>Row 2, cell 3</td> </tr> <tr> <td>Row 3, cell 1</td> <td rowspan="2">Row 3, cell 2</td> <td>Row 3, cell 3</td> </tr> <tr> <td>Row 4, cell 1</td> <td>Row 4, cell 3</td> </tr> </table>

As you can see, I removed the third cell in row 1 and added the colspan attribute to the first cell in row 1. What you need to know when you want to create cells that spans across columns is, that the span is always to the right.

To create a cell that spans across rows, you have to remember to that when you span across rows, the span is always downwards. This means, you have to remove a cell in the following rows or else the table is not going to look like you intended.

Basics of Tables Previous Thead & tbody Next This article has been fully translated into the following languages:

• German
• Portuguese
• Russian
• Thai

Is your preferred language not on the list? Click here to help us translate this article into your language!