CSS Alinhamento de Tabela
Alinhamento horizontal
text-align:center para alimhar o conteúdo ao
centro.
Na prática
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h2>A propriedade
text-align </h2>
<p>Esta propriedade define
o alinhamento horizontal (como esquerda, direita ou centro) do conteúdo em th
ou td.</p>
<table>
<tr>
<th>Nome </th>
<th>Sobre Nome</th>
<th>Valor a receber</th>
</tr>
<tr>
<td>Maria</td>
<td>José</td>
<td>R$100</td>
</tr>
<tr>
<td>João</td>
<td>Rufino</td>
<td>R$150</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$300</td>
</tr>
<tr>
<td>Maria</td>
<td>Silva</td>
<td>R$250</td>
</tr>
</table>
</body>
</html>
com a text-align:
left propriedade:
Na
prática
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>A propriedade
text-align</h2>
<p>Esta propriedade define
o alinhamento horizontal (como esquerda, direita ou centro) do conteúdo em th
ou td.</p>
<table>
<tr>
<th>Nome </th>
<th>Sobre nme</th>
<th>Valor a receber</th>
</tr>
<tr>
<td>Maria</td>
<td>José</td>
<td>R$100</td>
</tr>
<tr>
<td>João</td>
<td>Rufino</td>
<td>R$150</td>
</tr>
<tr>
<td>Maria</td>
<td>Silva</td>
<td>R$300</td>
</tr>
<tr>
<td>Antonia</td>
<td>Silva</td>
<td>R$250</td>
</tr>
</table>
</body>
</html>
Alinhamento vertical
A vertical-align propriedade define o alinhamento
vertical (como superior, inferior ou central) do conteúdo em <th> ou
<td>.
Na pratica
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>A propriedade de alinhamento vertical</h2>
<p>Essa propriedade define o alinhamento vertical (como
superior, inferior ou central) do conteúdo em th ou td.</p>
<table>
<tr>
<th>Nome</th>
<th>Sobre
nome</th>
<th>Valor a
receber</th>
</tr>
<tr>
<td>Maria</td>
<td>José</td>
<td>R$100</td>
</tr>
<tr>
<td>João
</td>
<td>Rufino</td>
<td>R$150</td>
</tr>
<tr>
<td>José</td>
<td>Silva</td>
<td>R$300</td>
</tr>
<tr>
<td>Antonia</td>
<td>Silva</td>
<td>R$250</td>
</tr>
</table>
</body>
</html>