Table
border , border-collapse
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table.test1 {
border-collapse: collapse;
border : 1px solid red;
}
/*table.test1 tr {
border : 1px solid red;
}
table.test1 th, table.test1 td {
border : 1px solid red;
}*/
</style>
</head>
<body>
<table class="test1">
<tr>
<th>Firstname</th><th>Lastname</th><th>Savings</th>
</tr>
<tr>
<td>Peter</td><td>Griffin</td><td>$100</td>
</tr>
<tr>
<td>Lois</td><td>Griffin</td><td>$150</td>
</tr>
<tr>
<td>Joe</td><td>Swanson</td><td>$300</td>
</tr>
<tr>
<td>Cleveland</td><td>Brown</td><td>$250</td>
</tr>
</table>
</body>
</html>
width, height
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table.test1 {
border-collapse: collapse;
width : 100%;
height : 500px;
}
table.test1 th, table.test1 td {
border : 1px solid red;
}
</style>
</head>
<body>
<table class="test1">
<tr>
<th>Firstname</th><th>Lastname</th><th>Savings</th>
</tr>
<tr>
<td>Peter</td><td>Griffin</td><td>$100</td>
</tr>
<tr>
<td>Lois</td><td>Griffin</td><td>$150</td>
</tr>
<tr>
<td>Joe</td><td>Swanson</td><td>$300</td>
</tr>
<tr>
<td>Cleveland</td><td>Brown</td><td>$250</td>
</tr>
</table>
</body>
</html>
text-align, vertical-align
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table.test1 {
border-collapse: collapse;
width : 100%;
height : 500px;
}
table.test1 th, table.test1 td {
border : 1px solid red;
}
table.test1 td:last-child {
text-align : right;
vertical-align : bottom;
}
</style>
</head>
<body>
<table class="test1">
<tr>
<th>Firstname</th><th>Lastname</th><th>Savings</th>
</tr>
<tr>
<td>Peter</td><td>Griffin</td><td>$100</td>
</tr>
<tr>
<td>Lois</td><td>Griffin</td><td>$150</td>
</tr>
<tr>
<td>Joe</td><td>Swanson</td><td>$300</td>
</tr>
<tr>
<td>Cleveland</td><td>Brown</td><td>$250</td>
</tr>
</table>
</body>
</html>
padding, background-color, :hover
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table.test1 {
border-collapse: collapse;
width : 100%;
}
table.test1 th, table.test1 td {
border : 1px solid #ffffff;
padding : 10px;
}
table.test1 th {
background-color: #4CAF50;
}
table.test1 tr:hover {background-color: #ddd;}
</style>
</head>
<body>
<table class="test1">
<tr>
<th>Firstname</th><th>Lastname</th><th>Savings</th>
</tr>
<tr>
<td>Peter</td><td>Griffin</td><td>$100</td>
</tr>
<tr>
<td>Lois</td><td>Griffin</td><td>$150</td>
</tr>
<tr>
<td>Joe</td><td>Swanson</td><td>$300</td>
</tr>
<tr>
<td>Cleveland</td><td>Brown</td><td>$250</td>
</tr>
</table>
</body>
</html>