onlyforbopi
9/26/2018 - 4:12 PM
HTML.CSS.Tables.Flat Table.ex2
HTML.CSS.Tables.Flat Table.ex2
#myTable {
display: block;
font-family: sans-serif;
font-size: 115%;
overflow: auto;
width: auto;
}
#myTable th {
background-color: rgb(112, 196, 105);
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
#myTable td {
background-color: rgb(238, 238, 238);
color: rgb(111, 111, 111);
padding: 20px 30px;
text-align:center;
}
#myTable caption {
background-color:lightGreen;
padding:20px;
font-size: 130%;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A typical HTML table with simple flat design styling</title>
</head>
<body>
<table id="myTable" class=".flat-design">
<caption>A typical HTML table</caption>
<tr>
<th scope="col">Given Name</th>
<th scope="col">Family Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Michel</td>
<td>Buffa</td>
<td>52</td>
</tr>
<tr>
<td>Dark</td>
<td>Vador</td>
<td>Unknown</td>
</tr>
<tr>
<td>Luke</td>
<td>Skywalker</td>
<td>Unknown</td>
</tr>
</table>
</body>
</html>HTML.CSS.Tables.Flat Table.ex2
Original source: http://www.toolinfy.com/flat-html-table-css-styling