CSS Tables border: 1px solid black;
Table Borders }
</style>
To specify table borders in CSS, use </head>
the border property. <body>
<table>
The example below specifies a black
<tr>
border for <table>, <th>, and <td> <th>Firstname</th>
elements: <th>Lastname</th>
</tr>
Example <tr>
<!DOCTYPE html> <td>Peter</td>
<html> <td>Griffin</td>
<head> </tr>
<style> <tr>
table, th, td { <td>Lois</td>
border: 1px solid black; <td>Griffin</td>
} </tr>
</style> </table>
</head>
<body> <p><b>Note:</b> If a !DOCTYPE is not
specified, the border-collapse property can
<table> produce unexpected results
<tr> in IE8 and earlier versions.</p>
<th>Firstname</th>
<th>Lastname</th> </body>
</tr> </html>
<tr> Table Width and Height
<td>Peter</td>
<td>Griffin</td> Width and height of a table is defined by
</tr> the width and height properties.
<tr>
<td>Lois</td>
<td>Griffin</td> The example below sets the width of the
</tr> table to 100%, and the height of the <th>
</table> elements to 50px:
</body> Example
</html> <!DOCTYPE html>
<html>
Notice that the table in the example above <head>
has double borders. This is because both <style>
the table and the <th>/<td> elements table, td, th {
have separate borders. border: 1px solid black;
}
To display a single border for the table, table {
use the border-collapse property. width: 100%;
}
Collapse Borders th {
height: 50px;
The border-collapse property sets whether }
the table borders are collapsed into a </style>
</head>
single border or separated:
<body>
Example <table>
<!DOCTYPE html> <tr>
<html> <th>Firstname</th>
<head> <th>Lastname</th>
<style> <th>Savings</th>
table { </tr>
border-collapse: collapse; <tr>
} <td>Peter</td>
<td>Griffin</td>
table, td, th { <td>$100</td>
1
</tr> <td>$150</td>
<tr> </tr>
<td>Lois</td> <tr>
<td>Griffin</td> <td>Joe</td>
<td>$150</td> <td>Swanson</td>
</tr> <td>$300</td>
<tr> </tr>
<td>Joe</td> <tr>
<td>Swanson</td> <td>Cleveland</td>
<td>$300</td> <td>Brown</td>
</tr> <td>$250</td>
<tr> </tr>
<td>Cleveland</td> </table>
<td>Brown</td>
<td>$250</td> </body>
</tr> </html>
</table> Vertical Text Alignment
</body> The vertical-align property sets the
</html> vertical alignment, like top, bottom, or
Horizontal Text Alignment middle.
The text-align property sets the horizontal By default, the vertical alignment of text in
alignment, like left, right, or center. a table is middle (for both <th> and <td>
elements).
By default, the text in <th> elements are
center-aligned and the text in <td> The following example sets the vertical
elements are left-aligned. text alignment to bottom for <td>
elements:
The following example left-aligns the text
in <th> elements: Example
<!DOCTYPE html>
Example <html>
<!DOCTYPE html> <head>
<html> <style>
<head> table, td, th {
<style> border: 1px solid black;
table, td, th { }
border: 1px solid black;
} td {
height: 50px;
table { vertical-align: bottom;
width: 100%; }
} </style>
</head>
th { <body>
text-align: left;
} <table>
</style> <tr>
</head> <th>Firstname</th>
<body> <th>Lastname</th>
<th>Savings</th>
<table> </tr>
<tr> <tr>
<th>Firstname</th> <td>Peter</td>
<th>Lastname</th> <td>Griffin</td>
<th>Savings</th> <td>$100</td>
</tr> </tr>
<tr> <tr>
<td>Peter</td> <td>Lois</td>
<td>Griffin</td> <td>Griffin</td>
<td>$100</td> <td>$150</td>
</tr> </tr>
<tr> <tr>
<td>Lois</td> <td>Joe</td>
<td>Griffin</td> <td>Swanson</td>
2
<td>$300</td> Table Color
</tr>
<tr> The example below specifies the color of
<td>Cleveland</td> the borders, and the text and background
<td>Brown</td> color of <th> elements:
<td>$250</td>
</tr>
</table> Example
<!DOCTYPE html>
</body> <html>
</html> <head>
Table Padding <style>
table, td, th {
border: 1px solid green;
To control the space between the border }
and content in a table, use the padding
property on <td> and <th> elements: th {
background-color: green;
Example color: white;
<!DOCTYPE html> }
<html> </style>
<head> </head>
<style>
table, td, th { <body>
border: 1px solid black; <table>
} <tr>
<th>Firstname</th>
td { <th>Lastname</th>
padding: 15px; <th>Savings</th>
} </tr>
</style> <tr>
</head> <td>Peter</td>
<body> <td>Griffin</td>
<td>$100</td>
<table> </tr>
<tr> <tr>
<th>Firstname</th> <td>Lois</td>
<th>Lastname</th> <td>Griffin</td>
<th>Savings</th> <td>$150</td>
</tr> </tr>
<tr> <tr>
<td>Peter</td> <td>Joe</td>
<td>Griffin</td> <td>Swanson</td>
<td>$100</td> <td>$300</td>
</tr> </tr>
<tr> <tr>
<td>Lois</td> <td>Cleveland</td>
<td>Griffin</td> <td>Brown</td>
<td>$150</td> <td>$250</td>
</tr> </tr>
<tr> </table>
<td>Joe</td>
<td>Swanson</td> </body>
<td>$300</td> </html>
</tr> FANCY TABLE EXAMPLE
<tr> <!DOCTYPE html>
<td>Cleveland</td> <html>
<td>Brown</td> <head>
<td>$250</td> <style>
</tr> #customers {
</table> font-family: "Trebuchet MS", Arial,
Helvetica, sans-serif;
</body> width: 100%;
</html> border-collapse: collapse;
}
#customers td, #customers th {
font-size: 1em;
3
border: 1px solid #98bf21; </tr>
padding: 3px 7px 2px 7px; <tr>
} <td>North/South</td>
<td>Simon Crowther</td>
#customers th { <td>UK</td>
font-size: 1.1em; </tr>
text-align: left; <tr class="alt">
padding-top: 5px; <td>Paris spcialits</td>
padding-bottom: 4px; <td>Marie Bertrand</td>
background-color: #A7C942; <td>France</td>
color: #ffffff; </tr>
} </table>
#customers tr.alt td { </body>
color: #000000; </html>
background-color: #EAF2D3;
}
</style> SET THE POSITION OF TALE CAPTION
</head> <!DOCTYPE html>
<body> <html>
<head>
<table id="customers"> <style>
<tr> table, td, th {
<th>Company</th> border: 1px solid black;
<th>Contact</th> }
<th>Country</th>
</tr> caption {
<tr> caption-side: bottom;
<td>Alfreds Futterkiste</td> }
<td>Maria Anders</td> </style>
<td>Germany</td> </head>
</tr> <body>
<tr class="alt">
<td>Berglunds snabbkp</td> <table>
<td>Christina Berglund</td> <caption>Table 1.1 Customers</caption>
<td>Sweden</td> <tr>
</tr> <th>Company</th>
<tr> <th>Contact</th>
<td>Centro comercial Moctezuma</td> <th>Country</th>
<td>Francisco Chang</td> </tr>
<td>Mexico</td> <tr>
</tr> <td>Alfreds Futterkiste</td>
<tr class="alt"> <td>Maria Anders</td>
<td>Ernst Handel</td> <td>Germany</td>
<td>Roland Mendel</td> </tr>
<td>Austria</td> <tr class="alt">
</tr> <td>Berglunds snabbkp</td>
<tr> <td>Christina Berglund</td>
<td>Island Trading</td> <td>Sweden</td>
<td>Helen Bennett</td> </tr>
<td>UK</td> <tr>
</tr> <td>Centro comercial Moctezuma</td>
<tr class="alt"> <td>Francisco Chang</td>
<td>Kniglich Essen</td> <td>Mexico</td>
<td>Philip Cramer</td> </tr>
<td>Germany</td> <tr class="alt">
</tr> <td>Ernst Handel</td>
<tr> <td>Roland Mendel</td>
<td>Laughing Bacchus <td>Austria</td>
Winecellars</td> </tr>
<td>Yoshi Tannamuri</td> <tr>
<td>Canada</td> <td>Island Trading</td>
</tr> <td>Helen Bennett</td>
<tr class="alt"> <td>UK</td>
<td>Magazzini Alimentari Riuniti</td> </tr>
<td>Giovanni Rovelli</td> </table>
<td>Italy</td>
4
<p><b>Note:</b> IE8 supports the
caption-side property if a !DOCTYPE is </body>
specified.</p> </html>
