HTML Table Example-Fourth
Write a program to create HTML table having border and alternate row background colors using CSS.Final output should be like this:
Solution:
1) CSS
<style type="text/css">
.studentInfo {
width: 500px;
border-collapse: collapse;
}
.studentInfo td {
border: 1px solid black;
}
.studentInfo tr:nth-child(even) {
background-color: #E4FFB7;
}
.studentInfo tr:nth-child(odd) {
background-color: #EFFFD2;
}
.header {
text-align: center;
font-weight: bolder;
background-color: #80B327;
color: white;
}
</style>
|
2) Table HTML
<table class="studentInfo">
<tbody><tr>
<td class="header" colspan="6">STUDENTS MARK SHEET</td>
</tr>
<tr class="mainRow">
<td>Name</td>
<td>Maths</td>
<td>Science</td>
<td>English</td>
<td>Physics</td>
<td>General Knowledge</td>
</tr>
<tr class="altRow">
<td>David</td>
<td>85</td>
<td>87</td>
<td>88</td>
<td>92</td>
<td>88</td>
</tr>
<tr>
<td>Richard</td>
<td>91</td>
<td>81</td>
<td>78</td>
<td>71</td>
<td>74</td>
</tr>
<tr>
<td>John</td>
<td>81</td>
<td>86</td>
<td>88</td>
<td>84</td>
<td>92</td>
</tr>
<tr>
<td>Tony</td>
<td>84</td>
<td>86</td>
<td>87</td>
<td>82</td>
<td>81</td>
</tr>
<tr>
<td>Scott</td>
<td>71</td>
<td>79</td>
<td>82</td>
<td>88</td>
<td>89</td>
</tr>
</tbody></table>
|