Desafio: Tabelas
🏁 Objetivo
Apresentar informações dos funcionários em um formato de tabela estruturada, utilizando tags HTML apropriadas para criar linhas e colunas.
📋 Tarefa
Crie uma tabela com três colunas: Name, Position e Wage. Concentre-se no uso das tags HTML apropriadas para preencher a tabela com as linhas e colunas corretas. Aqui estão os dados a serem incluídos:
- Name: Emma Johnson | Position: Sales Associate | Wage: $15.50 per hour;
- Name: Liam Thompson | Position: Customer Service Representative | Wage: $14.75 per hour;
- Name: Olivia Rodriguez | Position: Marketing Coordinator | Wage: $18.25 per hour;
- Name: Noah Smith | Position: IT Support Specialist | Wage: $20.00 per hour;
- Name: Ava Davis | Position: Administrative Assistant | Wage: $16.80 per hour.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<table>
<!-- Columns heading -->
<thead>
<tr>
<th>___</th>
<th>Position</th>
<___>Wage</___>
</tr>
</thead>
<!-- Text for row 1 -->
<tbody>
<tr>
<td>Emma Johnson</td>
<td>___</td>
<td>$15.50 per hour</td>
</tr>
<!-- Text for row 2 -->
<tr>
<___>Liam Thompson</___>
<td>Customer Service Representative</td>
<td>$14.75 per hour</td>
</tr>
<!-- Text for row 3 -->
<___>
<td>Olivia Rodriguez</td>
<td>Marketing Coordinator</td>
<td>$18.25 per hour</td>
</___>
<!-- Text for row 4 -->
<tr>
/*
We collapse the borders of each cell.
By default, each cell has its own borders
which are not connected.
*/
table {
border-collapse: collapse;
margin: 0 auto;
margin-top: 30px;
font-family: Arial, sans-serif;
}
/*
Add a border and padding to the cells,
the distance from the content to the border.
*/
table th,
table td {
padding: 10px;
border: 3px solid #ff8a00;
text-align: center;
}
/* Style for table header row */
thead th {
background-color: #f2f2f2;
font-weight: bold;
text-transform: uppercase;
}
/* Alternate row background color */
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
/* Hover effect on table rows */
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 8
