I was asked by a visitor how she could give the cells of a table equal width, since by default, the size of the cells in all the columns changed every time she added content.
Since my visitor did not specify any web editor, I will assume that she is coding directly in HTML and CSS. This makes the article useful no matter which editor is being used, since any good software will have a way for you to directly modify the HTML and CSS.
A side effect of this is that you will need to know how to modify and insert CSS and HTML, otherwise the information here won't be very useful.
Although it is possible to set the width of your table and its cells directly in HTML, if your web page
is in HTML 4.01 or XHTML 1.0 (eg, using the "width" attribute of the <table> and
<td> tags), this article will only deal with how it can be done in CSS. This way, your code
will still be valid even if you switch to HTML5. (The latter no longer supports the width
attributes.)
Let's say that your table has 4 columns.
The CSS to make all the columns equal in width is as follows.
The table-layout: fixed; rule specifies that the table is to take its dimensions from the
<table> element's width and the width of the first row of cells (or the <col> elements, if you have them).
If you don't specify it, the default of auto will cause the browser to adjust the width of the table
and its cells according to how much content you have in each of them. This results in the ever-changing widths
that my visitor encountered as she added content to the table.
The CSS above then specifies that the table is to occupy 100% of the browser's window width, and each cell to take up 25% of that.
If you only want your rules to be applied to a specific table, and not all tables on your page, give the table
an id and set the rules to apply only to that id.
Take the demo table below:
| First column | Second column |
| More data for the first column | More data for the second column |
The HTML code is as follows:
And the CSS is like this:
As you can see, the rules are written in such a way so that they only apply to tables with an id of demotable.
For the curious, I have added borders to the cells and table so that the result looks like a table in your browser.
I have also added a border-collapse: collapse; rule so that the table won't have two lines between cells.
In addition, I have placed the caption in italics. These rules are optional and have nothing to do with making the
cells the same size. You don't have to add them if you don't want them.
If you are using blog software
and you do not have access to your site's style sheets (or perhaps you have access, but it's just not convenient to
add rules there), it's possible to put the CSS directly in the HTML "style" attribute for the table and
first row cells.
You do not need to add the width rule to the cells in subsequent rows. The browser will give them the same width as those in the first row.
Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Give the Cells of a Table the Same Width in HTML (HTML/CSS)
