<table width="100%">.
In HTML 5, using width in
that way has been deprecated in favor of putting the width within a style
designation. If you use <table width="100%"> in an HTML 5
webpage and check the page with the W3C
HTML validation tool, you will see the message
" Error The width attribute
on the table element is obsolete. Use CSS instead." You can use the following,
instead:
<table style="width: 100%;">
The same is true for specification of the width of <td>
table elements. Under HTML 4, the following was ok:
<td width="33%" align="left">
In the above HTML code, the cell width could be specified as 33% of the
table width and text in a cell could be left-aligned with
align="left". Under HTML 5, though, both specifications are
considered obsolete and the following should be used, instead:
<td style="width:33%; text-align:left;">
If you need to center the text, you can use text-align:center,
instead. If you wish to vertically align an element in a table cell, such
as text or an image, in HTML 4 you could use the following:
<td valign="top">March 12</td>
In HTML 5, you can use the following instead of the above deprecated use of valign:
<td style="vertical-align: top;">March 12</td>
The cellspacing and cellpadding attributes
for tables have also been deprecated from HTML 4 to HTML 5. E.g.:
<table cellspacing="0" cellpadding="7">
In HTML 5, you can pad individual cells as follows:
<td style="padding: 7px;">March 12</td>
In HTML 4, you can add borders around cells inside a table using
rules=. But that, too, has been deprecated and will be flagged
by the W3C validator tool. E.g., the following is acceptable as HTML 4 code
to add a border around a table with
style="border: 1px solid black; width: 100%;" and an internal
grid of horizontal and vertical lines around cells with
rules="all". Note: you can add just horizontal lines with
rules="rows" or vertical lines with rules="cols".
<table style="border: 1px solid black; width: 100%;" rules="all">
To achieve the same result with HTML 5 compliant code, you can remove
the rules="all" attribute from the table tag and instead
use the following for each td element:
<td style="border: 1px solid black;">
That will produce a table with a border around each cell, but you will
also see a small gap between the border of one cell and another, so you will
see what looks like a double border around each cell as shown below if
you also have <table style="border: 1px solid black;">.
| Date | Completed | In Progress |
| March 10 | 5 | 7 |
| March 11 | 6 | 5 |
| March 12 | 8 | 3 |
If you wish to elmininate what appears to be a double border, you need
to add border-collapse: collapse to the table tag, e.g.,
<table style="border: 1px solid black; border-collapse: collapse">
, which would produce the table below if each cell is specified as
above with <td style="padding: 5px; border: 1px
solid black;">.
| Date | Completed | In Progress |
| March 10 | 5 | 7 |
| March 11 | 6 | 5 |
| March 12 | 8 | 3 |
The border-collapse CSS
property sets determines whether cells inside a table have shared or separate
borders. You can also set border-collapse to provide separate
borders for cells using border-collapse: separate.
If all of the tables on the page will use the same table formatting,
you can put the CSS code specifying the attributes for the table and td
tags in a style section between <head> and
</head tags at the top of the page, instead of applying
the attributes to each tag whereever it is used. E.g.:
<style>
table {border: 1px solid black; border-collapse: collapse;}
td {padding: 5px; border: 1px solid black;}
</style>
Or you could put the settings in a separate .css file, which you could
have set the table attributes by including it using link,
e.g., if the file was named style.css:
<link rel="stylesheet" href="style.css" type="text/css">
References: