CSS: Text, Fonts, and Tables - Tables in CSS
(Page 6 of 6 )
Just like everything else, you can adjust tables in CSS as well. In our first example, we will learn to work with table layouts. There are two ways to set the table-layout property: fixed and auto.
<html>
<head>
<style type="text/css">
table.sampleone
{
table-layout: auto
}
table.sampletwo
{
table-layout: fixed
}
</style>
</head>
<body>
<table class="sampleone" border="1" width="100%">
<tr>
<td width="20%">Weeeeeeeeeeeeeeeeeeeeeeeeee here is a bunch of text</td>
<td width="30%">And some more</td>
<td width="40%">And even more!</td>
</tr>
</table>
<br />
<table class="sampletwo" border="1" width="100%">
<tr>
<td width="20%">You can't see all of this hahahahahahahahahahaha</td>
<td width="40%">Look even more text</td>
<td width="40%">And some more!</td>
</tr>
</table>
</body>
</html>
Showing Empty Cells in CSS
If you wish to show an empty cell in a table you can do so using empty-cells: show. Here it is in all its action-packed glory:
<html>
<head>
<style type="text/css">
table
{
border-collapse: separate;
empty-cells: show
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>I</td>
<td>Heart</td>
</tr>
<tr>
<td>Huckabees</td>
<td></td>
</tr>
</table>
</body>
</html>
Setting Collapsed and Detached Borders
Here we will demonstrate how to set both Collapsed and Detached borders in a table:
<html>
<head>
<style type="text/css">
table.collapse
{
border-collapse: collapse
}
table.separate
{
border-collapse: separate
}
</style>
</head>
<body>
<table class="collapse" border="1">
<tr>
<td>Hugh</td>
<td>Jass</td>
</tr>
<tr>
<td>Al</td>
<td>Coholic</td>
</tr>
</table>
<br />
<table class="separate" border="1">
<tr>
<td>Pumper</td>
<td>Nickle</td>
</tr>
<tr>
<td>Rye</td>
<td>Toast</td>
</tr>
</table>
</body>
</html>
Conclusion
Well that's all the time we have for this episode. We still have a few more things to discuss regarding tables, but we will cover those in a future article. I hope you enjoyed the article and I'll see you soon.
Till then...
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
