<!doctype html>
<html>
<head>
<title>tables width</title>
<style>
body{
background: #f8f9f9 ;
}
*{
box-sizing:border-box;
}
h1,h2{
text-transform:capitalize;
}
p{
padding:10px;
margin-left:1em;
font-size:18px;
}
aside{
width:90%;
padding:12px;
margin-left:2em;
margin-top:-1em;
font-size:18px;
}
.comp-chart{
border:1px solid;
width:300px;
margin-top:3em;
padding:5px;
border-collapse:collapse;
}
.comp-chart td,.comp-chart th{
border:1px solid;
text-align:center;
text-transform:capitalize;
padding:5px;
}
pre{background: #ecf0f1;margin:3em 0; width:90%;}
aside{background: #DAF7A6 ;}
</style>
</head>
<body>
<article>
<h1>check this out first:</h1>
<ul>
<li>tables expand to fill unused space.they will expand table cells to fill it's entire width.there is no empty spce with no table cells</li>
<li>
if no width is assigned then either <code>auto</code> (as wide as the content) or <code>fixed</code> (space shared evenly)is used on that table cell that has no width.
</li>
<li>it is all about the first row.altering width of any table cell after the first row will have the same effect but this is not practical.</li>
</ul>
</article>
<article>
<h1>overall width for a table</h1>
<p>naturaly tables will expand it's table cells in the first row to fill it's entire width.if for instance a table has a width of 100%,80% or 400px.it will fill all this width assigned to it with it's table cells.tables will not leave any unused worthless space of it's own width abandoned. this will lead to an important note:
<aside>a table <em>will</em> change any widths assigned for it's table cells in the first row and lead to unexpected results in widths.that is if a developer assigns a total of widths for table cells in the first row that is less than the overall table width.this is a normal consequence of the table natural behavior of trying to <em>fill</em> all it's width with table cells.leave no unused space.see the example below:</aside>
<pre>
table{
width:400px;/*or 100%*/
table-layout:auto;/*or fixed*/
}
/*the total of widths below is less than the overall table width.
table will expand to fill unused space.widths will be unlike what expected to be.*/
.first-cell-in-first-row{
width:50px;/*or 20%*/
}
.second-cell-in-first-row{
width:60px;/*or 50%*/
}
.third-cell-in-first-row{
width:100px;/*or 15%*/
}
</pre>
<aside>changing table-layout does not make any difference.tables nature will keep expanding to fill unused space.</aside>
<h2>one width for one or two cells only</h2>
<p>the same rule of a <em>"tables fill unused space"</em>,and all the <b>above</b> applys if width is only asigned to one or some of the table cells.</p>
<pre>
table{
width:400px;/*or 100%*/
table-layout:auto;/*or fixed*/
}
.first-cell-in-first-row{
width:50px;/*or 20%*/
}
.second-cell-in-first-row{
w/*no width*/
}
.third-cell-in-first-row{
/*no width given/
}
</pre>
<aside>again think about it as: a table always fill unused space(expand cells to be as much as it's width).one cell has it's assigned width others will expand to fill the unused table space(as wide as content if <code>auto</code> or evenly if <code>fixed</code>).again no widths then <code>table-layout</code> will play it's role.with widths cells will be sized.</aside>
</article>
<article>
<h1>one width table cells design</h1>
<p>to have such tables.assign widths for table cells in the first row.you are done!.no need to play with <code>table-layout</code></p>
<pre>
table{
width:100%;
}
/*total of 100% width=overall table width*/
.st-cell{
width:50%;
}
.scd-cell{
width:20%;
}
.thd-cell{
width:30%;
}
</pre>
<aside>remember it is all about the first table row!</aside>
</article>
<article>
<h1>no widths given</h1>
<p>not asgining any width for first row table cells can lead to either expanding table cells as much as it's content expands(<code>table-layout:auto;</code>) or width will be evenly shared(<code>table-layout:fixed;</code>)</p>
</article>
<article>
<h1>colspan override assgined widths</h1>
<p>if a table cell spans multiple columns.assgining width for it will have no influence.</p>
<p>a table cell-<th> or <td>.that spans for example 5 rows can share these five table rows between one or more cells.for instance
<pre>
<th rowspan="5></th>
</pre>
will span 5 rows.then:
<pre><th rowspan="5"><th rowspan="3"></th></th></pre>;
would let the inside-th header span 3 rows out from the five of the first th and have 2 left..the inside-th can span all the five or any number of rows between 1 and 5 from the first cell.therefore any element that span multiple rows can share these rows with other cells leting thoes inside-cells to span number of rows out from the total of rows that the initial th spaned before.
</p>
<aside>
<em><i><b>width and colspan:</b></i></em>
always when working with table-cells' widths.consider colspan as well as a method of setting a table-cell's width.particularly in complex tables!!
</aside>
</article>
<article>
<h1>check this out now</h1>
<p>after all of the above.it is a relation bettwen wether a <em><b>width</b></em> is given for a <code>table</code> or <code>table cell</code> <strong style="font-size:20px;">OR NOT</strong> and bettwen <code>table-layout</code> property.
<table class="comp-chart">
<tr><th>width</th><th>table-layout</th> <th>influence</th></tr>
<tr>
<td>yes</td>
<td>yes</td>
<td>widths apply.<code>table-layout</code> has influcence only on table cells with <em>no</em> width assigned</td>
</tr>
<tr>
<td>yes-to all headers</td>
<td>yes-auto/fixed</td>
<td> only widths apply</td>
</tr>
<tr>
<td>no</td>
<td>yes</td>
<td>table cells will expand following <code>table-layout</code></td>
</tr>
</table>
</p>
<aside>one last <strong><i>note:</i></strong>
giving width to one table cell turns off <code>table-layout</code> influence on it.the opposite will turn it on.
</aside>
</article>
<article>
<h1>the markup</h1>
<p>
nesting tables inside each other can be tricky and unpredicted.
for example:
<pre>
<td><table></table></td></pre>
will work but having another nested table element will not work.and in if they are both nested inside the same <table> containing element,they might not be consistent with the father <table> element.
<pre>
<table id="main-table">
<tr id="first-row-in-main">
<td><table id="nested-table-1"></table></td>
</tr>
<tr id="second-row-in-main">
<td><table id="nested-table-2"></table></td>
</tr>
</table>
</pre>
avoiding such markup is a always recommended.
</p>
</article>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.