I neeed to find a way to make this blog more relevant to people and benefit people.
I want to start posting all the coding projects i have done.
Let me just start today
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font:70% Arial;
color:#063774;
}
table {
border:1px #B4D0F3 solid;
border-collapse:collapse;
font-size:3em;
}
tr.stripped{
background-color:#E5EFFE;
}
th{
padding:10px18px;
background-color:#B4D0F3;
text-align:left;
}
td{
padding:10px 18px;
}
</style>
</head>
<body>
<table>
<thead>
<th>Name</th>
<th>Date Of Birth</th>
</thead>
<tbody>
<tr>
<td>Emma</td>
<td>Girl</td>
</tr>
<tr>
<td>John</td>
<td>Boy</td>
</tr>
<tr>
<td>Eva</td>
<td>Girl</td>
</tr>
<tr>
<td>Smith</td>
<td>Boy</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table tbody tr:nth-child(even)').addClass('stripped');
})
</script>
</body>
</html>
This code helps build a zebra like table whereby the second and fourth rows are different colors to the first and third,
Hope that benefited you.
No comments:
Post a Comment