<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
|
<title>Document</title> |
|
<style> |
|
table |
|
{ |
|
width: 100%; |
|
border-collapse: collapse; |
|
} |
|
table tr |
|
{ |
|
height: 50px; |
|
text-align: center; |
|
} |
|
table td,table th |
|
{ |
|
border: 1px solid black; |
|
border-collapse: collapse; |
|
} |
|
caption h1 |
|
{ |
|
text-align: center; |
|
font-size: 24px; |
|
} |
|
thead |
|
{ |
|
background: #49638C; |
|
color: white; |
|
} |
|
|
|
td[colspan="3"] |
|
{ |
|
text-align: right; |
|
} |
|
tfoot |
|
{ |
|
background: #8895ab; |
|
color: white; |
|
} |
|
tbody tr:nth-child(odd) |
|
{ |
|
background: #c8cace; |
|
} |
|
tbody tr:hover |
|
{ |
|
background:#C7C2F5; |
|
} |
|
tbody tr:nth-child(2n) td:first-child |
|
{ |
|
color: aqua; |
|
} |
|
tbody tr:nth-child(2n+1) td:first-child |
|
{ |
|
color: cornflowerblue; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<table> |
|
<caption> |
|
<h1>lorem4</h1> |
|
</caption> |
|
<thead> |
|
<tr> |
|
<th>Lorem.</th> |
|
<th>Quibusdam!</th> |
|
<th>Repellat.</th> |
|
<th>Accusamus.</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr> |
|
<td>Lorem.</td> |
|
<td>Similique.</td> |
|
<td>Excepturi!</td> |
|
<td>Ipsa!</td> |
|
</tr> |
|
<tr> |
|
<td>Laborum!</td> |
|
<td>Iure.</td> |
|
<td>Quia.</td> |
|
<td>Debitis.</td> |
|
</tr> |
|
<tr> |
|
<td>Nam?</td> |
|
<td>Natus.</td> |
|
<td>Omnis?</td> |
|
<td>Sunt!</td> |
|
</tr> |
|
<tr> |
|
<td>Praesentium?</td> |
|
<td>Quasi.</td> |
|
<td>Explicabo?</td> |
|
<td>Laudantium?</td> |
|
</tr> |
|
</tbody> |
|
<tfoot> |
|
<tr> |
|
<td colspan="3">Lorem.</td> |
|
<td>Possimus.</td> |
|
</tr> |
|
<tr> |
|
<td colspan="3">Eos.</td> |
|
<td>Laudantium?</td> |
|
</tr> |
|
</tfoot> |
|
</table> |
|
</body> |
|
</html> |