The look of an HTML table can be greatly improved with CSS:
NUMBERS 1-5 in VARIOUS LANGUAGES | |||||
---|---|---|---|---|---|
English | Espanol | Francais | Italiano | Deutsch | |
1 | one | uno | un | uno | eins |
2 | two | dos | deux | due | zwei |
3 | three | tres | trois | tre | drei |
4 | four | cuatro | quatre | quattro | vier |
5 | five | cinco | cinq | cinque | funf |
table, th, td {
border:border: 1px solid black;
}
The border-collapse property sets whether the table borders are collapsed into a single border or separated:
table {
border-collapse:collapse;
}
table, th, td {
border:border: 1px solid black;
}
table {
width:100%;
}
th {
width:50px;
}
The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:
td {
text-align:right;
}
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
td {
height:50px;
vertical-align:bottom;
}
td {
padding:15px;
}
<html> <head> <style type="text/css"> table, td, th { border:1px solid #000; } th { background-color:#0a4171; color:#fff; } </style> </head> <body> <table> <tr> <th>Name</th> </tr> <tr> <td>Ashwani</td> </tr> <tr> <td>Sachin</td> </tr> </table> </body> </html>
Name |
---|
Ashwani |
Sachin |
The empty-cells property indicates whether a cell without any content should have a border displayed.
This property can have one of the three values show, hide or inherit.
<html> <head> <style type="text/css"> table.empty { border-collapse:separate; empty-cells:hide; } td.empty { padding:5px; border:1px solid #000; } </style> </head> <body> <table class="empty"> <tr> <td class="empty">ACER</td> <td class="empty">DELL</td> <td class="empty"></td> </tr> <tr> <td class="empty"></td> <td class="empty">SONY</td> <td class="empty">HP</td> </tr> </table> </body> </html>
ACER | DELL | |
SONY | HP |
The table-layout Allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.
This property can have one of the three values fixed, auto or inherit.
<html> <head> <style type="text/css"> table.auto{ table-layout:auto; } table.fixed{ table-layout:fixed; } </style> </head> <body> <table border="1px" width="100%" class="auto"> <tr> <td width="20%">123456789876543215712345678765432587346</td> <td width="80%">123456789876</td> </tr> </table> <table border="1px" width="100%" class="fixed"> <tr> <td width="20%">123456789876543215712345678765432587346</td> <td width="80%">123456789876</td> </tr> </table> </body> </html>
123456789876543215712345678765432587346 | 123456789876 |
123456789876543215712345678765432587346 | 123456789876 |