CSS Tamanho da Tabela

 CSS Tamanho da Tabela

Largura e Altura da Mesa

A largura e a altura de uma tabela são definidas pelas propriedades width height.

Na prática

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

  border: 1px solid black;

}

 

table {

  border-collapse: collapse;

  width: 100%;

}

 

th {

  height: 70px;

}

</style>

</head>

<body>

<h2>As propriedades de largura e altura</h2>

<p>Defina a largura da tabela e a altura da linha do cabeçalho da tabela:</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$ 150</td>

  </tr>

  <tr>

    <td>João</td>

    <td>Rufino</td>

    <td>R$ 200</td>

  </tr>

  <tr>

    <td>José</td>

    <td>Silva</td>

    <td>R$ 500</td>

  </tr>

  <tr>

    <td>Antonia</td>

    <td>Silva</td>

    <td>R$2500</td>

  </tr>

</table>

</body>

</html>

CRIANDO UMA TABELA COM METADA DA PÁGINA

Na prática

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

  border: 1px solid black;

}

 

table {

  border-collapse: collapse;

  width: 100%;

}

 

th {

  height: 70px;

}

</style>

</head>

<body>

<h2>Uma tabela que abrange apenas metade da página

</h2>

<p>Defina a largura da tabela para 50%:</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$ 150</td>

  </tr>

  <tr>

    <td>João</td>

    <td>Rufino</td>

    <td>R$ 200</td>

  </tr>

  <tr>

    <td>José</td>

    <td>Silva</td>

    <td>R$ 500</td>

  </tr>

  <tr>

    <td>Antonia</td>

    <td>Silva</td>

    <td>R$2500</td>

  </tr>

</table>

</body>

</html>