Tabela Níveis

by Jedaias Rodrigues

HTML

<table>
	<tr>
		<td>
			<table>
				<tr class='titulo'>
					<td colspan = '3'>Língua Portuguesa</td>
				</tr>
				<tr class='titulo'>
					<td class='row1'>Nivel</td>
					<td class='row2'>Pontos na Escala</td>
					<td class='row3'>Percentual (%)</td>
				</tr>
				<tr>
					<td class='td1 row1'>Nível 8</td>
					<td class='td1 row2'>375 - 400</td>
					<td class='td1 row3'>0</td>
				</tr>
				<tr>
					<td class='td2 row1'>Nível 7</td>
					<td class='td2 row2'>350 - 375</td>
					<td class='td2 row3'>3,85</td>
				</tr>
				<tr>
					<td class='td1 row1'>Nível 6</td>
					<td class='td1 row2'>325 - 350</td>
					<td class='td1 row3'>17,31</td>
				</tr>
				<tr>
					<td class='td2 row1'>Nível 5</td>
					<td class='td2 row2'>300 - 325</td>
					<td class='td2 row3'>19,23</td>
				</tr>
				<tr>
					<td class='td1  row1'>Nível 4</td>
					<td class='td1 row2'>275 - 300</td>
					<td class='td1 row3'>28,85</td>
				</tr>
				<tr>
					<td class='td2 row1'>Nível 3</td>
					<td class='td2 row2'>250 - 275</td>
					<td class='td2 row3'>17,31</td>
				</tr>
				<tr>
					<td class='td1 row1'>Nível 2</td>
					<td class='td1 row2'>225 - 250</td>
					<td class='td1 row3'>9,62</td>
				</tr>
				<tr>
					<td class='td2 row1'>Nível 1</td>
					<td class='td2 row2'>200 - 225</td>
					<td class='td2 row3'>3,85</td>
				</tr>
				<tr>
					<td colspan = '3' class='td1'>Nível da sua Escola: Nível 4 ( 292,89)</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td></td>
	</tr>
</table>

CSS

table 
{ 
  font-family: 'Arial'; 
  font-style: normal; 
  font-size: 12px;
  text-align: center;
  /*white-space: nowrap;*/
}
.titulo 
{
  background-color: blue;
  border: 1px solid blue; 
  color: white;
}
.row1
{
  //border-bottom: 1px solid black;
  //border-left: 1px solid black;
  width: 45px;
}
.row2
{
  //border-bottom: 1px solid black;
  width: 60px;
}
.row3
{
  //border-bottom: 1px solid black;
  //border-right: 1px solid black;
  width: 50px;
}
.td1
{
  background-color: rgb(204,228,247);
}
.td2
{
  background-color: rgb(175,213,241);
}