When I create a table in html, a table with a width of 100%, if I want all the cells (tds) to be divided in equal parts, do I have to enter the width % for each cell? Am I "obliged" to do it?
E.g.:
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</table>
OR the following could also be the right procedure, not to write the width in each tds if I want each of them to be devided equally:
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I know it works with both manners but I just want to know the "legit" way to do it.
This question is related to
html
html-table
you can try this, I would do it with CSS, but i think you want it with tables without CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body leftmargin=0 rightmargin=0>
<table cellpadding="0" cellspacing="0" width="100%" border="1" height="350px">
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
</table>
</body>
</html>
Yes, you will need to specify the width for each cell, otherwise they will try to be "intelligent" about it and divide the 100% between whichever cells think they need it most. Cells with more content will take up more width than those with less.
To make sure you get equal width for each cell you need to make it clear. Either do it as you already have, or use CSS.
table.className td { width: 25%; }
This is definitely the cleanest answer to the question: https://stackoverflow.com/a/14025331/1008519.
In combination with table-layout: fixed I often find <colgroup> a great tool to make columns act as you want (see codepen here):
table {_x000D_
/* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */_x000D_
table-layout: fixed;_x000D_
}_x000D_
.fixed-width {_x000D_
width: 100px;_x000D_
}_x000D_
.col-12 {_x000D_
width: 100%;_x000D_
}_x000D_
.col-11 {_x000D_
width: 91.666666667%;_x000D_
}_x000D_
.col-10 {_x000D_
width: 83.333333333%;_x000D_
}_x000D_
.col-9 {_x000D_
width: 75%;_x000D_
}_x000D_
.col-8 {_x000D_
width: 66.666666667%;_x000D_
}_x000D_
.col-7 {_x000D_
width: 58.333333333%;_x000D_
}_x000D_
.col-6 {_x000D_
width: 50%;_x000D_
}_x000D_
.col-5 {_x000D_
width: 41.666666667%;_x000D_
}_x000D_
.col-4 {_x000D_
width: 33.333333333%;_x000D_
}_x000D_
.col-3 {_x000D_
width: 25%;_x000D_
}_x000D_
.col-2 {_x000D_
width: 16.666666667%;_x000D_
}_x000D_
.col-1 {_x000D_
width: 8.3333333333%;_x000D_
}_x000D_
_x000D_
/* Stylistic improvements from here */_x000D_
_x000D_
.align-left {_x000D_
text-align: left;_x000D_
}_x000D_
.align-right {_x000D_
text-align: right;_x000D_
}_x000D_
table {_x000D_
width: 100%;_x000D_
}_x000D_
table > tbody > tr > td,_x000D_
table > thead > tr > th {_x000D_
padding: 8px;_x000D_
border: 1px solid gray;_x000D_
}<table cellpadding="0" cellspacing="0" border="0">_x000D_
<colgroup>_x000D_
<col /> <!-- take up rest of the space -->_x000D_
<col class="fixed-width" /> <!-- fixed width -->_x000D_
<col class="col-3" /> <!-- percentage width -->_x000D_
<col /> <!-- take up rest of the space -->_x000D_
</colgroup>_x000D_
<thead>_x000D_
<tr>_x000D_
<th class="align-left">Title</th>_x000D_
<th class="align-right">Count</th>_x000D_
<th class="align-left">Name</th>_x000D_
<th class="align-left">Single</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>_x000D_
<td class="align-right">19</td>_x000D_
<td class="align-left">Lisa McArthur</td>_x000D_
<td class="align-left">No</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td class="align-left">This is a shorter title</td>_x000D_
<td class="align-right">2</td>_x000D_
<td class="align-left">John Oliver Nielson McAllister</td>_x000D_
<td class="align-left">Yes</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
_x000D_
_x000D_
<table cellpadding="0" cellspacing="0" border="0">_x000D_
<!-- define everything with percentage width -->_x000D_
<colgroup>_x000D_
<col class="col-6" />_x000D_
<col class="col-1" />_x000D_
<col class="col-4" />_x000D_
<col class="col-1" />_x000D_
</colgroup>_x000D_
<thead>_x000D_
<tr>_x000D_
<th class="align-left">Title</th>_x000D_
<th class="align-right">Count</th>_x000D_
<th class="align-left">Name</th>_x000D_
<th class="align-left">Single</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>_x000D_
<td class="align-right">19</td>_x000D_
<td class="align-left">Lisa McArthur</td>_x000D_
<td class="align-left">No</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td class="align-left">This is a shorter title</td>_x000D_
<td class="align-right">2</td>_x000D_
<td class="align-left">John Oliver Nielson McAllister</td>_x000D_
<td class="align-left">Yes</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>Use the property table-layout:fixed; on the table to get equally spaced cells. If a column has a width set, then no matter what the content is, it will be the specified width. Columns without a width set will divide whatever room is left over among themselves.
<table style='table-layout:fixed;'>
<tbody>
<tr>
<td>gobble de gook</td>
<td>mibs</td>
</tr>
</tbody>
</table>
Just to throw it out there, you could also use <colgroup><col span='#' style='width:#%;'/></colgroup>, which doesn't require repetition of style per table data or giving the table an id to use in a style sheet. I think setting the widths on the first row is enough though.
Source: Stackoverflow.com