Changing Column Width - The Complete HTML5 Tutorial

HTML5 Tutorial TOC Table of Contents

Download PDF

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! adplus-dvertising

Từ khóa » Html Cell Width Fixed