CSS Tabelas
Com css pode melhorar tabelas.
BORDAS
DA TABELA
Border é uma propriedade para especificar borda tabela no
css.
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h2>Adicionar borda na tabela:</h2>
<table>
<tr>
<th>Nome</th>
<th>Sobre
nome</th>
</tr>
<tr>
<td>Maria</td>
<td>José</td>
</tr>
<tr>
<td>João</td>
<td>Rufino</td>
</tr>
</table>
</body>
</html>
TABELA
DE LARGURA TOTAL
adicione width:100% ao elemento <table>
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
table {
width: 100%;
}
</style>
</head>
<body>
<h2>Tabela de largura total</h2>
<table>
<tr>
<th>Nome</th>
<th>Sobre
nome</th>
</tr>
<tr>
<td>Maria</td>
<td>José</td>
</tr>
<tr>
<td>João</td>
<td>Rufino</td>
</tr>
</table>
</body>
</html>
Recolher bordas da tabela
A border-collapse propriedade define se as bordas da tabela devem ser
recolhidas em uma única borda:
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid;
}
table {
width: 100%;
border-collapse:
collapse;
}
</style>
</head>
<body>
<h2>Deixe as bordas da tabela entrarem em
colapso</h2>
<table>
<tr>
<th>Nome</th>
<th>Sobre
nome</th>
</tr>
<tr>
<td>Maria</td>
<td>José</td>
</tr>
<tr>
<td>João</td>
<td>Rufino</td>
</tr>
</table>
</body>
</html>
AGORA BORDA EM REDOR DO CONTEÚDO
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border: 1px solid;
}
</style>
</head>
<body>
<h2>Borda única ao redor da mesa</h2>
<table>
<tr>
<th>Nome</th>
<th>Sobre
nome</th>
</tr>
<tr>
<td>Maria
</td>
<td>José</td>
</tr>
<tr>
<td>João</td>
<td>Rufino</td>
</tr>
</table>
</body>
</html>