Changing Column Width - 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: Changing Column Width

Now that you we have used all the right semantics you might want to change the width of each column – as of right now, each column is 33% wide. Let’s say we want the first column to be 40% of the table and the two remaning columns to be 30% (as 40% + 30% +30% = 100%).

In order to do this, we use the <col> element. This element is to be placed between the <table> tag and the <thead> tag and we use the style attribute to define the width of the columns. The <col> element is a self-closing element and you need one for every columns of you table. Let’s have an example:

<table border="1" width="100%"> <col style="width:40%"> <col style="width:30%"> <col style="width:30%"> <thead> <tr> <th>Fruits</th> <th>Vitamin A</th> <th>Vitamin C</th> </tr> </thead> <tbody> <tr> <th>Apples</th> <td>98 ui</td> <td>8.4 mg</td> </tr> <tr> <th>Oranges</th> <td>295 ui</td> <td>69.7 mg</td> </tr> <tr> <th>Bananas</th> <td>76 ui</td> <td>10.3 mg</td> </tr> </tbody> </table>

This way, you can control how wide the columns of the table should be. I have used the style attribute and the value "width:40%" as an example, but ideally, you should have this in your stylesheet file, as this has everything to do with looks and nothing with the semantics.

I you did use your stylesheet you could create three classes where you defined the width of each column, and then your markup would look something like this:

<table border="1"> <col class="column-one"> <col class="column-two"> <col class="column-three"> <thead> <tr> <th>Fruits</th> <th>Vitamin A</th>

What you have learned

• Every table starts and end with the <table> element
• You use the attributes colspan and rowspan to merge cells
• A table is divided into a head (<thead> element) and a body (the <tbody> element)
• Inside the head and body the table is divided into rows using the <tr> element
• You don’t define columns in HTML tables, but instead you use the <td> element to define the individual data cells
• Whenever you need to define a heading cell, use the <th> element instead of the <td> element

Thead & tbody Previous Using HTML5 today Next This article has been fully translated into the following languages:

• Arabic
• German
• Russian
• Spanish
• Thai

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