Organizar dados em tabelas

As tabelas HTML foram criadas para fornecer uma maneira direta de marcar dados tabulares estruturados e exibir esses dados num formulário que seja fácil de ler e digerir.

Quando o HTML estava a ser desenvolvido, no entanto, o CSS não era amplamente suportado nos navegadores, então as tabelas eram o principal meio pelo qual os sites foram criados. Eles foram usados ​​para posicionar conteúdo, bem como para construir o layout geral de uma página. Isso funcionou na época, mas não foi para o qual a tabela de marcação foi destinada, e isso levou a muitos outros problemas associados.

Felizmente, percorremos um longo caminho desde então. Hoje as tabelas são usadas especificamente para organizar dados (como deveriam ser), e o CSS é livre para continuar com os trabalhos de posicionamento e layout.

Construir tabelas de dados ainda tem os seus desafios. Como uma tabela deve ser construída em HTML depende em grande parte dos dados e como ele deve ser exibido. Então, uma vez que eles são marcados em HTML, as tabelas precisam de ser denominadas com CSS para tornar a informação mais legível e compreensível para os usuários.

Criando uma tabela

As tabelas são compostas por dados contidos em colunas e linhas e o HTML fornece vários elementos diferentes para definir e estruturar esses itens. No mínimo, uma tabela deve consistir em elementos <table>, <tr> (linha da tabela) e <td> (dados da tabela). Para maior estrutura e valor semântico adicional, as tabelas podem incluir o elemento <th> (cabeçalho da tabela) e alguns outros elementos também. Quando todos esses elementos trabalham juntos, eles produzem uma tabela sólida.

Tabela

Usamos o elemento <table> para inicializar uma tabela numa página. Usar o elemento <table> significa que as informações dentro deste elemento serão dados tabulares exibidos nas colunas e linhas necessárias.

<table>

...

</table>

Linha da tabela

Uma vez que uma tabela foi definida em HTML, as linhas da tabela podem ser adicionadas usando o elemento <tr>. Uma tabela pode ter várias linhas de tabela ou elementos <tr>. Dependendo da quantidade de informações que há para exibir, o número de linhas da tabela pode ser substancial.

<table>

<tr>

`...`

</tr>

<tr>

`...`

</tr>

</table>

Dados da tabela

Uma vez que uma tabela é definida e as linhas dentro dessa tabela foram configuradas, as células de dados podem ser adicionadas à tabela através dos dados da tabela, ou <td>, elemento. Listando vários elementos <td> um após o outro criará colunas dentro de uma linha de tabela.

<table>

<tr>

`<td>Don&#8217;t Make Me Think by Steve Krug</td>`

`<td>In Stock</td>`

`<td>1</td>`

`<td>0.02</td>`

</tr>

<tr>

`<td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>`

`<td>In Stock</td>`

`<td>2</td>`

`<td>2.94 (6.47 &#215; 2)</td>`

</tr>

<tr>

`<td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>`

`<td>Out of Stock</td>`

`<td>1</td>`

`<td>2.23</td>`

</tr>

<tr>

`<td>Bulletproof Web Design by Dan Cederholm</td>`

`<td>In Stock</td>`

`<td>1</td>`

`<td>0.17</td>`

</tr>

</table>

Demonstração de uma Tabela

HTML

<table>

<tr>

`<td>Don&#8217;t Make Me Think by Steve Krug</td>`

`<td>In Stock</td>`

`<td>1</td>`

`<td>0.02</td>`

</tr>

<tr>

`<td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>`

`<td>In Stock</td>`

`<td>2</td>`

`<td>2.94 (6.47 &#215; 2)</td>`

</tr>

<tr>

`<td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>`

`<td>Out of Stock</td>`

`<td>1</td>`

`<td>2.23</td>`

</tr>

<tr>

`<td>Bulletproof Web Design by Dan Cederholm</td>`

`<td>In Stock</td>`

`<td>1</td>`

`<td>0.17</td>`

</tr>

</table>

Cabeçalho da tabela

Para designar um título para uma coluna ou linha de células, o elemento de cabeçalho da tabela, <th>, deve ser usado. O elemento <th> funciona como o elemento <td> na medida em que cria uma célula para dados. O valor para usar o elemento <th> sobre o elemento <td> é que o elemento do cabeçalho da tabela fornece o valor semântico ao significar que os dados dentro da célula são um título, enquanto o elemento <td> representa apenas um dado genérico.

A diferença entre os dois elementos é semelhante à diferença entre cabeçalhos (elementos <h1> a <h6>) e parágrafos (<p> elementos). Embora o conteúdo de um título possa ser colocado dentro de um parágrafo, não faz sentido fazê-lo. Especificamente, usar um título adiciona mais valor semântico ao conteúdo. O mesmo é verdadeiro para cabeçalhos de tabela.

Os cabeçalhos de tabela podem ser usados ​​tanto em colunas quanto em linhas; os dados dentro de uma tabela determinam onde os cabeçalhos são apropriados. O atributo do scope ajuda a identificar exatamente o conteúdo a que um cabeçalho da tabela se relaciona. O atributo de escopo indica com os valores col, row, colgroup e rowgroup se um cabeçalho de tabela se aplica a uma linha ou coluna. Os valores mais utilizados são col e row. O valor col indica que cada célula dentro da coluna se relaciona diretamente com esse cabeçalho da tabela e o valor da linha indica que cada célula dentro da linha se relaciona diretamente com esse cabeçalho da tabela.

Usando o elemento <th>, juntamente com o atributo de scope, ajuda enormemente os leitores de tela e as tecnologias de apoio a entender uma tabela. Portanto, eles também são benéficos para aqueles que navegam numa página da web usando essas tecnologias.

Além disso, dependendo do navegador, cabeçalhos de tabela podem receber algum estilo padrão, geralmente negrito e centrado.

<table>

<tr>

`<th scope="col">Item</th>`

`<th scope="col">Availability</th>`

`<th scope="col">Qty</th>`

`<th scope="col">Price</th>`

</tr>

<tr>

`<td>Don&#8217;t Make Me Think by Steve Krug</td>`

`<td>In Stock</td>`

`<td>1</td>`

`<td>0.02</td>`

</tr>

<tr>

`<td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>`

`<td>In Stock</td>`

`<td>2</td>`

`<td>2.94 (6.47 &#215; 2)</td>`

</tr>

<tr>

`<td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>`

`<td>Out of Stock</td>`

`<td>1</td>`

`<td>2.23</td>`

</tr>

<tr>

`<td>Bulletproof Web Design by Dan Cederholm</td>`

`<td>In Stock</td>`

`<td>1</td>`

`<td>0.17</td>`

</tr>

</table>

Demonstração do Cabeçalho da Tabela

HTML

<table>

<tr>

`<th scope="col">Item</th>`

`<th scope="col">Availability</th>`

`<th scope="col">Qty</th>`

`<th scope="col">Price</th>`

</tr>

<tr>

`<td>Don&#8217;t Make Me Think by Steve Krug</td>`

`<td>In Stock</td>`

`<td>1</td>`

`<td>0.02</td>`

</tr>

<tr>

`<td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>`

`<td>In Stock</td>`

`<td>2</td>`

`<td>2.94 (6.47 &#215; 2)</td>`

</tr>

<tr>

`<td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>`

`<td>Out of Stock</td>`

`<td>1</td>`

`<td>2.23</td>`

</tr>

<tr>

`<td>Bulletproof Web Design by Dan Cederholm</td>`

`<td>In Stock</td>`

`<td>1</td>`

`<td>0.17</td>`

</tr>

</table>

CSS

th {

font-weight: bold;

}

Obter dados numa tabela é apenas o começo. Embora tenhamos arranhado a superfície de como adicionar semanticamente dados a uma tabela, há mais o que podemos fazer para definir a estrutura das nossas tabelas.

Atribuição de Cabeçalhos

O atributo de cabeçalho é muito semelhante ao atributo de scope. Por padrão, o atributo de scope só pode ser usado no elemento <th>. No caso de uma célula, um elemento <td> ou <th>, precisa de ser associado a um cabeçalho diferente, o atributo de cabeçalho entra em jogo. O valor do atributo dos cabeçalhos num elemento <td> ou <th> precisa de corresponder ao valor do atributo id do elemento <th> ao qual a célula pertence.

Estrutura da tabela

Saber como construir uma tabela e organizar os dados é extremamente poderoso; no entanto, existem alguns elementos adicionais para nos ajudar a organizar os dados e a estrutura de uma tabela. Esses elementos incluem <caption>, <thead>, <tbody> e <tfoot>.

Legenda da tabela

O elemento <caption> fornece uma legenda ou um título para a tabela. Uma legenda ajudará os usuários a identificar o que a tabela pertence e quais os dados que eles podem esperar encontrar nela. O elemento <caption> deve vir imediatamente após a marcação <table>, e está posicionado no topo de uma tabela por padrão.

<table>

<caption>Design and Front-End Development Books</caption>

...

</table>

Demonstração da legenda da tabela

HTML

<table>

<caption>Design and Front-End Development Books</caption>

<tr>

`<th scope="col">Item</th>`

`<th scope="col">Availability</th>`

`<th scope="col">Qty</th>`

`<th scope="col">Price</th>`

</tr>

<tr>

`<td>Don&#8217;t Make Me Think by Steve Krug</td>`

`<td>In Stock</td>`

`<td>1</td>`

`<td>0.02</td>`

</tr>

<tr>

`<td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>`

`<td>In Stock</td>`

`<td>2</td>`

`<td>2.94 (6.47 &#215; 2)</td>`

</tr>

<tr>

`<td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>`

`<td>Out of Stock</td>`

`<td>1</td>`

`<td>2.23</td>`

</tr>

<tr>

`<td>Bulletproof Web Design by Dan Cederholm</td>`

`<td>In Stock</td>`

`<td>1</td>`

`<td>0.17</td>`

</tr>

</table>

Cabeçalho, corpo e rodapé da tabela

O conteúdo das tabelas pode ser dividido em vários grupos, incluindo um cabeçalho, um corpo e um rodapé. Os elementos <thead> (cabeçalho da tabela), <tbody> (corpo da tabela) e <tfoot> (rodapé da tabela) ajudam a organizar tabelas estruturalmente.

O elemento do cabeçalho da tabela, <thead>, envolve a linha de cabeçalho ou as linhas de uma tabela para denotar o cabeçalho. O cabeçalho da tabela deve ser colocado no topo de uma tabela, depois de qualquer elemento <caption> e antes de qualquer elemento <tbody>.

Depois do cabeçalho da tabela podem vir os elementos <tbody> ou <tfoot>. Originalmente, o elemento <tfoot> teve que vir imediatamente após o elemento <thead>, mas o HTML5 forneceu margem de manobra aqui. Estes elementos podem agora ocorrer em qualquer ordem, desde que nunca sejam elementos pai uns dos outros. O elemento <tbody> deve conter os dados principais dentro de uma tabela, enquanto que o elemento <tfoot> contém dados que descrevem o conteúdo de uma tabela.

<table>

<caption>Design and Front-End Development Books</caption>

<thead>

`<tr>`

  `<th scope="col">Item</th>`

  `<th scope="col">Availability</th>`

  `<th scope="col">Qty</th>`

  `<th scope="col">Price</th>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<td>Don&#8217;t Make Me Think by Steve Krug</td>`

  `<td>In Stock</td>`

  `<td>1</td>`

  `<td>0.02</td>`

`</tr>`

`...`

</tbody>

<tfoot>

`<tr>`

  `<td>Subtotal</td>`

  `<td></td>`

  `<td></td>`

  `<td>35.36</td>`

`</tr>`

`<tr>`

  `<td>Tax</td>`

  `<td></td>`

  `<td></td>`

  `<td>3.54</td>`

`</tr>`

`<tr>`

  `<td>Total</td>`

  `<td></td>`

  `<td></td>`

  `<td>48.90</td>`

`</tr>`

</tfoot>

</table>

Demonstração da legenda da tabela

HTML

<table>

<caption>Design and Front-End Development Books</caption>

<thead>

`<tr>`

  `<th scope="col">Item</th>`

  `<th scope="col">Availability</th>`

  `<th scope="col">Qty</th>`

  `<th scope="col">Price</th>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<td>Don&#8217;t Make Me Think by Steve Krug</td>`

  `<td>In Stock</td>`

  `<td>1</td>`

  `<td>0.02</td>`

`</tr>`

`<tr>`

  `<td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>`

  `<td>In Stock</td>`

  `<td>2</td>`

  `<td>2.94 (6.47 &#215; 2)</td>`

`</tr>`

`<tr>`

  `<td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>`

  `<td>Out of Stock</td>`

  `<td>1</td>`

  `<td>2.23</td>`

`</tr>`

`<tr>`

  `<td>Bulletproof Web Design by Dan Cederholm</td>`

  `<td>In Stock</td>`

  `<td>1</td>`

  `<td>0.17</td>`

`</tr>`

</tbody>

<tfoot>

`<tr>`

  `<td>Subtotal</td>`

  `<td></td>`

  `<td></td>`

  `<td>35.36</td>`

`</tr>`

`<tr>`

  `<td>Tax</td>`

  `<td></td>`

  `<td></td>`

  `<td>3.54</td>`

`</tr>`

`<tr>`

  `<td>Total</td>`

  `<td></td>`

  `<td></td>`

  `<td>48.90</td>`

`</tr>`

</tfoot>

</table>

Combinando várias células

Muitas vezes, duas ou mais células precisam de ser combinadas num, sem quebrar o layout geral da linha e das colunas. Talvez duas células próximas entre si contenham os mesmos dados, há uma célula vazia, ou as células devem ser combinadas para propósitos de estilo. Nestes casos, podemos usar os atributos colspan e rowspan. Estes dois atributos funcionam nos elementos <td> ou <th>.

O atributo colspan é usado para abranger uma única célula em várias colunas dentro de uma tabela, enquanto o atributo rowspan é usado para abranger uma única célula em várias linhas. Cada atributo aceita um valor inteiro que indica o número de células a serem expandidas, sendo 1 o valor padrão.

Usando a tabela de livros de antes, agora podemos remover as células da tabela vazia dentro do rodapé da tabela, bem como limpar o cabeçalho da tabela.

<table>

<caption>Design and Front-End Development Books</caption>

<thead>

`<tr>`

  `<th scope="col" colspan="2">Item</th>`

  `<th scope="col">Qty</th>`

  `<th scope="col">Price</th>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<td>Don&#8217;t Make Me Think by Steve Krug</td>`

  `<td>In Stock</td>`

  `<td>1</td>`

  `<td>0.02</td>`

`</tr>`

`...`

</tbody>

<tfoot>

`<tr>`

  `<td colspan="3">Subtotal</td>`

  `<td>35.36</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Tax</td>`

  `<td>3.54</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Total</td>`

  `<td>48.90</td>`

`</tr>`

</tfoot>

</table>

Demonstração de como combinar várias células

HTML

<table>

<caption>Design and Front-End Development Books</caption>

<thead>

`<tr>`

  `<th scope="col" colspan="2">Item</th>`

  `<th scope="col">Qty</th>`

  `<th scope="col">Price</th>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<td>Don&#8217;t Make Me Think by Steve Krug</td>`

  `<td>In Stock</td>`

  `<td>1</td>`

  `<td>0.02</td>`

`</tr>`

`<tr>`

  `<td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>`

  `<td>In Stock</td>`

  `<td>2</td>`

  `<td>2.94 (6.47 &#215; 2)</td>`

`</tr>`

`<tr>`

  `<td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>`

  `<td>Out of Stock</td>`

  `<td>1</td>`

  `<td>2.23</td>`

`</tr>`

`<tr>`

  `<td>Bulletproof Web Design by Dan Cederholm</td>`

  `<td>In Stock</td>`

  `<td>1</td>`

  `<td>0.17</td>`

`</tr>`

</tbody>

<tfoot>

`<tr>`

  `<td colspan="3">Subtotal</td>`

  `<td>35.36</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Tax</td>`

  `<td>3.54</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Total</td>`

  `<td>48.90</td>`

`</tr>`

</tfoot>

</table>

Bordas da Tabela

O uso efetivo das bordas pode ajudar a tornar as tabelas mais compreensíveis. Bordas em torno de uma tabela ou células individuais podem causar um grande impacto quando um usuário está a tentar interpretar dados e procurar rapidamente informações. Quando as bordas da tabela de estilo com CSS existem, duas propriedades que serão rapidamente acessíveis: colapso de borda e espaçamento de borda.

Colapso de propriedade de bordas

As tabelas consistem num elemento pai <table>, bem como elementos <th> ou <td> aninhados. Quando aplicamos bordas ao redor desses elementos, essas bordas vão começar a empilhar, com a borda de um elemento ao lado de outro elemento. Por exemplo, se colocarmos uma borda de 2 píxeis em torno de uma tabela inteira e, em seguida, uma borda adicional de 2 píxeis ao redor de cada célula da tabela, haveria uma borda de 4 píxeis ao redor de cada célula da tabela.

A propriedade border-collapse determina o modelo de borda de uma tabela. Existem três valores para a propriedade border-collapse: collapse, separate, e inherit. Por padrão, o valor da propriedade de collapse de borda é separado, o que significa que todas as bordas diferentes serão empilhadas uma ao lado da outra, conforme descrito acima. O valor do collapse, por outro lado, condensa as bordas numa, escolhendo a célula da tabela como a borda principal.

table {

border-collapse: collapse;

}

th,

td {

border: 1px solid #cecfd5;

padding: 10px 15px;

}

Demonstração de colapso de propriedade de bordas

HTML

<table>

<thead>

`<tr>`

  `<th scope="col" colspan="2">Item</th>`

  `<th scope="col">Qty</th>`

  `<th scope="col">Price</th>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<td>Don&#8217;t Make Me Think by Steve Krug</td>`

  `<td>In Stock</td>`

  `<td>1</td>`

  `<td>0.02</td>`

`</tr>`

`<tr>`

  `<td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>`

  `<td>In Stock</td>`

  `<td>2</td>`

  `<td>2.94 (6.47 &#215; 2)</td>`

`</tr>`

`<tr>`

  `<td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>`

  `<td>Out of Stock</td>`

  `<td>1</td>`

  `<td>2.23</td>`

`</tr>`

`<tr>`

  `<td>Bulletproof Web Design by Dan Cederholm</td>`

  `<td>In Stock</td>`

  `<td>1</td>`

  `<td>0.17</td>`

`</tr>`

</tbody>

<tfoot>

`<tr>`

  `<td colspan="3">Subtotal</td>`

  `<td>35.36</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Tax</td>`

  `<td>3.54</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Total</td>`

  `<td>48.90</td>`

`</tr>`

</tfoot>

</table>

Propriedade espacial da borda

Como a propriedade de colapso de borda com o valor separado permite que as bordas sejam empilhadas uma contra a outra, a propriedade de espaçamento de borda pode determinar a quantidade de espaço, se houver, aparece entre as bordas.

Por exemplo, uma tabela com uma margem de 1 pixel em torno de toda a tabela e uma borda de 1 pixel em torno de cada célula terá uma borda de 2 píxeis ao redor de cada célula porque as bordas se acumulam próximas uma da outra. Adicionando um valor de espaçamento de borda de 4 píxeis separa as bordas por 4 píxeis.

table {

border-collapse: separate;

border-spacing: 4px;

}

table,

th,

td {

border: 1px solid #cecfd5;

}

th,

td {

padding: 10px 15px;

}

Demonstração da propriedade espacial da borda

HTML

<table>

<thead>

`<tr>`

  `<th scope="col" colspan="2">Item</th>`

  `<th scope="col">Qty</th>`

  `<th scope="col">Price</th>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<td>Don&#8217;t Make Me Think by Steve Krug</td>`

  `<td>In Stock</td>`

  `<td>1</td>`

  `<td>0.02</td>`

`</tr>`

`<tr>`

  `<td>A Project Guide to UX Design by Russ Unger &#38; Carolyn Chandler</td>`

  `<td>In Stock</td>`

  `<td>2</td>`

  `<td>2.94 (6.47 &#215; 2)</td>`

`</tr>`

`<tr>`

  `<td>Introducing HTML5 by Bruce Lawson &#38; Remy Sharp</td>`

  `<td>Out of Stock</td>`

  `<td>1</td>`

  `<td>2.23</td>`

`</tr>`

`<tr>`

  `<td>Bulletproof Web Design by Dan Cederholm</td>`

  `<td>In Stock</td>`

  `<td>1</td>`

  `<td>0.17</td>`

`</tr>`

</tbody>

<tfoot>

`<tr>`

  `<td colspan="3">Subtotal</td>`

  `<td>35.36</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Tax</td>`

  `<td>3.54</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Total</td>`

  `<td>48.90</td>`

`</tr>`

</tfoot>

</table>

A propriedade de espaçamento de borda funciona somente quando o valor da propriedade de colapso de borda é separado, o seu valor padrão. Se a propriedade de colapso de borda não tiver sido usada anteriormente, podemos usar a propriedade de espaçamento entre fronteiras sem nos preocuparmos.

Além disso, a propriedade de espaçamento de borda pode aceitar dois valores de comprimento: o primeiro valor para espaçamento horizontal e o segundo valor para o espaçamento vertical. O espaçamento de fronteira da declaração: 5px 10px ;, por exemplo, colocará 5 píxeis de espaçamento horizontal entre bordas e 10 píxeis de espaçamento vertical entre as bordas.

Adicionando bordas às linhas

Adicionar bordas a uma tabela pode ser complicado às vezes, particularmente ao colocar bordas entre filas. Dentro de uma tabela, as bordas não podem ser aplicadas a elementos <tr> ou elementos estruturais da tabela, então, quando queremos colocar uma borda entre as linhas, é necessário algum pensamento.

Começaremos por ter a certeza de que o valor da propriedade de colapso da borda da tabela está configurado para desmoronar e, em seguida, adicionaremos uma borda inferior a cada célula da tabela, independentemente de ser um elemento <th> ou <td>. Se quisermos, podemos remover a borda inferior das células na última linha da tabela usando o seletor de pseudo-classe de última criança para selecionar o último elemento <tr> dentro da tabela e direcionar os elementos <td> dentro dessa linha. Além disso, se uma tabela estiver a usar os elementos estruturais, queremos certificar-nos de que pré-qualificamos a última linha da tabela como sendo dentro do elemento <tfoot>.

table {

border-collapse: collapse;

}

th,

td {

border-bottom: 1px solid #cecfd5;

padding: 10px 15px;

}

tfoot tr:last-child td {

border-bottom: 0;

}

Listrar linhas de tabela

No esforço para tornar as tabelas mais legíveis, uma prática de design comum é "listar" as linhas de tabela com cores de fundo alternadas. Isso torna as linhas mais claras e fornece uma sugestão visual para a digitalização de informações. Uma maneira de fazer isso é colocar uma classe em todos os outros elementos <tr> e definir uma cor de fundo para essa classe. Outra maneira mais fácil é usar o seletor de pseudo-classe nth-child com um argumento par ou ímpar para selecionar todos os outros elementos <tr>.

Aqui, a nossa tabela de livros usa o seletor de pseudo-classe nth-child com um argumento par para selecionar todas as linhas de tabela pares dentro da tabela e aplicar um fundo cinza. Consequentemente, todas as outras linhas dentro do corpo da tabela são cinzas.

table {

border-collapse: separate;

border-spacing: 0;

}

th,

td {

padding: 10px 15px;

}

thead {

background: #395870;

color: #fff;

}

tbody tr:nth-child(even) {

background: #f0f0f2;

}

td {

border-bottom: 1px solid #cecfd5;

border-right: 1px solid #cecfd5;

}

td:first-child {

border-left: 1px solid #cecfd5;

}

Demonstração de como listrar linhas de tabela

Dentro deste código, há algumas complexidades que merecem destaque. Para começar, o elemento <table> tem uma propriedade de colapso de borda explícita definida para separar e uma propriedade de espaçamento de borda definida como 0. O motivo para isso é que os elementos <td> incluem bordas, enquanto os elementos <th> não . Sem a propriedade de colapso de borda definida para separar as bordas dos elementos <td>, o corpo e o rodapé da tabela seriam mais largos do que a cabeça.

Uma vez que a propriedade de colapso de borda está configurada para separar, precisamos de ter cuidado em como as bordas são aplicadas aos elementos <td>. Aqui, os limites estão definidos para a direita e a parte inferior de todos os elementos <td>. Então, o primeiro elemento <td> dentro de um elemento <tr> receberá um limite esquerdo. Como todos os elementos <td> se acumulam, então fazem as suas bordas, proporcionando a aparência de uma borda sólida ao redor de cada elemento.

Por fim, todos os elementos <th> recebem um fundo azul e todo elemento <tr> recebe um fundo cinza por meio do seletor de pseudo-classe nth-child.

Alinhando texto

Além das bordas da tabela e das listras, o alinhamento do texto dentro das células, tanto horizontal quanto vertical, desempenha um papel fundamental na formatação da tabela. Nomes, descrições e assim por diante são geralmente deixados à esquerda, enquanto os números e outras figuras estão à prova de flush. Outras informações, dependendo do seu contexto, podem ser centradas. Podemos mover o texto horizontalmente usando a propriedade text-align em CSS, conforme abordámos na Lição 6, "Working with Typography".

Para alinhar texto verticalmente, no entanto, a propriedade vertical-align é usada. A propriedade de alinhamento vertical funciona apenas com elementos de linha e de célula de tabela; não funcionará para bloco, bloco in-line ou outros níveis de elemento.

A propriedade de alinhamento vertical aceita um punhado de valores diferentes; os valores mais populares são top, middle e bottom. Esses valores posicionam verticalmente o texto em relação à célula da tabela, para os elementos da célula da tabela ou para o elemento pai mais próximo, para elementos de nível interno.

Ao rever o HTML e o CSS para incluir as propriedades de alinhamento de texto e alinhamento vertical, podemos limpar o layout da nossa tabela de livros. Observemos que os dados dentro da tabela se tornam muito mais claros e mais digeríveis.

HTML

<table>

<thead>

`<tr>`

  `<th scope="col" colspan="2">Item</th>`

  `<th scope="col">Qty</th>`

  `<th scope="col">Price</th>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<td>`

    `<strong class="book-title">Don&#8217;t Make Me Think</strong> by Steve Krug`

  `</td>`

  `<td class="item-stock">In Stock</td>`

  `<td class="item-qty">1</td>`

  `<td class="item-price">0.02</td>`

`</tr>`

`<tr>`

  `<td>`

    `<strong class="book-title">A Project Guide to UX Design</strong> by Russ Unger &#38; Carolyn Chandler`

  `</td>`

  `<td class="item-stock">In Stock</td>`

  `<td class="item-qty">2</td>`

  `<td class="item-price">2.94 <span class="item-multiple">6.47 &#215; 2</span></td>`

`</tr>`

`<tr>`

  `<td>`

    `<strong class="book-title">Introducing HTML5</strong> by Bruce Lawson &#38; Remy Sharp`

  `</td>`

  `<td class="item-stock">Out of Stock</td>`

  `<td class="item-qty">1</td>`

  `<td class="item-price">2.23</td>`

`</tr>`

`<tr>`

  `<td>`

    `<strong class="book-title">Bulletproof Web Design</strong> by Dan Cederholm`

  `</td>`

  `<td class="item-stock">In Stock</td>`

  `<td class="item-qty">1</td>`

  `<td class="item-price">0.17</td>`

`</tr>`

</tbody>

<tfoot>

`<tr>`

  `<td colspan="3">Subtotal</td>`

  `<td>35.36</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Tax</td>`

  `<td>3.54</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Total</td>`

  `<td>48.90</td>`

`</tr>`

</tfoot>

</table>

CSS

table {

border-collapse: separate;

border-spacing: 0;

color: #4a4a4d;

font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;

}

th,

td {

padding: 10px 15px;

vertical-align: middle;

}

thead {

background: #395870;

color: #fff;

}

th:first-child {

text-align: left;

}

tbody tr:nth-child(even) {

background: #f0f0f2;

}

td {

border-bottom: 1px solid #cecfd5;

border-right: 1px solid #cecfd5;

}

td:first-child {

border-left: 1px solid #cecfd5;

}

.book-title {

color: #395870;

display: block;

}

.item-stock,

.item-qty {

text-align: center;

}

.item-price {

text-align: right;

}

.item-multiple {

display: block;

}

tfoot {

text-align: right;

}

tfoot tr:last-child {

background: #f0f0f2;

}

Tabela de estilo completo

Até agora, a nossa tabela de livros parece muito boa. Vamos dar um passo adiante, arredondando alguns cantos e marcando um pouco o texto apenas um pouco mais.

HTML

<table>

<thead>

`<tr>`

  `<th scope="col" colspan="2">Item</th>`

  `<th scope="col">Qty</th>`

  `<th scope="col">Price</th>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<td>`

    `<strong class="book-title">Don&#8217;t Make Me Think</strong>`

    `<span class="text-offset">by Steve Krug</span>`

  `</td>`

  `<td class="item-stock">In Stock</td>`

  `<td class="item-qty">1</td>`

  `<td class="item-price">0.02</td>`

`</tr>`

`<tr>`

  `<td>`

    `<strong class="book-title">A Project Guide to UX Design</strong>`

    `<span class="text-offset">by Russ Unger &#38; Carolyn Chandler</span>`

  `</td>`

  `<td class="item-stock">In Stock</td>`

  `<td class="item-qty">2</td>`

  `<td class="item-price">2.94 <span class="text-offset item-multiple">6.47 &#215; 2</span></td>`

`</tr>`

`<tr>`

  `<td>`

    `<strong class="book-title">Introducing HTML5</strong>`

    `<span class="text-offset">by Bruce Lawson &#38; Remy Sharp</span>`

  `</td>`

  `<td class="item-stock">Out of Stock</td>`

  `<td class="item-qty">1</td>`

  `<td class="item-price">2.23</td>`

`</tr>`

`<tr>`

  `<td>`

    `<strong class="book-title">Bulletproof Web Design</strong>`

    `<span class="text-offset">by Dan Cederholm</span>`

  `</td>`

  `<td class="item-stock">In Stock</td>`

  `<td class="item-qty">1</td>`

  `<td class="item-price">0.17</td>`

`</tr>`

</tbody>

<tfoot>

`<tr class="text-offset">`

  `<td colspan="3">Subtotal</td>`

  `<td>35.36</td>`

`</tr>`

`<tr class="text-offset">`

  `<td colspan="3">Tax</td>`

  `<td>3.54</td>`

`</tr>`

`<tr>`

  `<td colspan="3">Total</td>`

  `<td>48.90</td>`

`</tr>`

</tfoot>

</table>

CSS

table {

border-collapse: separate;

border-spacing: 0;

color: #4a4a4d;

font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;

}

th,

td {

padding: 10px 15px;

vertical-align: middle;

}

thead {

background: #395870;

background: linear-gradient(#49708f, #293f50);

color: #fff;

font-size: 11px;

text-transform: uppercase;

}

th:first-child {

border-top-left-radius: 5px;

text-align: left;

}

th:last-child {

border-top-right-radius: 5px;

}

tbody tr:nth-child(even) {

background: #f0f0f2;

}

td {

border-bottom: 1px solid #cecfd5;

border-right: 1px solid #cecfd5;

}

td:first-child {

border-left: 1px solid #cecfd5;

}

.book-title {

color: #395870;

display: block;

}

.text-offset {

color: #7c7c80;

font-size: 12px;

}

.item-stock,

.item-qty {

text-align: center;

}

.item-price {

text-align: right;

}

.item-multiple {

display: block;

}

tfoot {

text-align: right;

}

tfoot tr:last-child {

background: #f0f0f2;

color: #395870;

font-weight: bold;

}

tfoot tr:last-child td:first-child {

border-bottom-left-radius: 5px;

}

tfoot tr:last-child td:last-child {

border-bottom-right-radius: 5px;

}

Na prática

Agora que sabemos como criar e estilizar tabelas, vamos encerrar a última página restante do nosso site da Conferência Styles, o cronograma.

1. Vamos começar a nossa página de agendamento por abrir o arquivo schedule.html e vamos adicionar um elemento <section> com um valor de atributo de classe da linha, como fizemos com todas as outras subpáginas. Dentro deste novo elemento <section> vamos também adicionar um elemento <div> com um valor de atributo de classe do contêiner.

<section class="row">

<div class="container">

`...`

</div>

</section>

Com estes elementos e classes, criámos uma nova secção da página com fundo branco e preenchimento vertical e centramos o nosso conteúdo na página. O que é diferente aqui de todas as outras subpáginas é o valor do atributo da classe contêiner no lugar do valor do atributo da classe da grade no elemento <div>. Uma vez que não estamos a usar nenhuma das classes baseadas em col, renunciaremos ao valor do atributo da classe grid em favor do valor do atributo da classe contêiner.

1. Dentro da nova secção, vamos adicionar três tabelas, uma para cada dia da conferência. As tabelas exibirão os eventos de cada dia usando três colunas e várias linhas e incluirão um cabeçalho de tabela e um corpo.

Para começar, descreva a estrutura da primeira tabela, incluindo os elementos <table>, <thead> e <tbody>.

<section class="row">

<div class="container">

`<table>`

  `<thead>`

    `...`

  `</thead>`

  `<tbody>`

    `...`

  `</tbody>`

`</table>`

</div>

</section>

1. Atualmente, mesmo que a nossa primeira tabela não contenha dados, ela tem alguns estilos aplicados. Especificamente, a reinicialização que adicionamos na Lição 1 para diminuir o tom de todos os estilos de navegador padrão adicionou a propriedade de colapso de borda com um valor de colapso e a propriedade de espaçamento de borda com um valor de 0 na tabela. Queremos esses estilos, então vamos deixá-los em paz; no entanto, vamos criar uma nova secção no nosso arquivo main.css para adicionar alguns estilos adicionais.

Na nossa nova secção de estilos especificamente para a página Agendamento (que aparecerá logo abaixo dos estilos para a página altifalantes), configuremos os nossos elementos <table> para ter uma largura de 100% e uma margem inferior de 44 píxeis.

Em seguida, usando o seletor de pseudo-classe da última criança para identificar o último elemento <table> dentro da secção, vamos definir a margem inferior para 0 píxeis. Isso evita que esta tabela seja conflitante com o preenchimento inferior pertencente ao elemento <section> com um valor de atributo de classe da linha.

Até agora, a nova seção no nosso arquivo main.css aparece assim:

/*

========================================

Schedule

========================================

*/

table {

margin-bottom: 44px;

width: 100%;

}

table:last-child {

margin-bottom: 0;

}

1. Agora vamos adicionar alguns dados à nossa tabela. Começaremos com o primeiro dia da nossa conferência, o dia da oficina de 24 de agosto.

Dentro do elemento <thead> da tabela vamos adicionar um elemento <tr>. A primeira célula dentro da linha será um elemento <th> observando o foco do dia: "Workshops" para este dia específico. Uma vez que o elemento <th> é o título da linha, também adicionaremos o atributo scope com um valor de linha para ele.

Depois que o elemento <th> vem um elemento <td> com a data, "24 de agosto", neste caso. Agora, mais frequentemente do que não, teremos três colunas, sendo o primeiro um cabeçalho de tabela que identifica uma hora do dia e as duas primeiras colunas sendo células de tabela normais que identificam altifalantes para esse tempo. Uma vez que esta linha não possui dois altifalantes separados, queremos adicionar o atributo colspan com um valor de 2 ao elemento <td>, forçando-o a abranger duas colunas.

Nosso código para a tabela agora se parece com isto:

<table>

<thead>

`<tr>`

  `<th scope="row">`

    `Workshops`

  `</th>`

  `<td colspan="2">`

    `August 24th`

  `</td>`

`</tr>`

</thead>

<tbody>

`...`

</tbody>

</table>

1. Dentro do elemento <tbody> vamos preencher as atividades do dia. Começaremos adicionando um elemento <tr> com um elemento <th> e <td> diretamente dentro da linha.

No elemento <th> e todos os elementos <th> subsequentes, adicionaremos o atributo scope com um valor de row para identificar semanticamente esse elemento como o cabeçalho da linha. Então, dentro do elemento <th> vamos adicionar um elemento <time> que mostra o tempo da primeira atividade do dia, "8:30 AM" neste caso. Também incluiremos um atributo de data e hora no elemento <time> com um valor observando o tempo em horas, minutos e segundos, 08:30:00.

No elemento <td> que segue o elemento <th>, incluiremos o nome da atividade (uma vez que não há falantes neste momento), que é "Registro" neste caso. Uma vez que existe apenas uma atividade neste momento, também incluiremos o atributo colspan com um valor de 2 no elemento <td>.

No total, o código da nossa primeira tabela parece assim:

<table>

<thead>

`<tr>`

  `<th scope="row">`

    `Workshops`

  `</th>`

  `<td colspan="2">`

    `August 24th`

  `</td>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<th scope="row">`

    `<time datetime="08:30:00">8:30 AM</time>`

  `</th>`

  `<td colspan="2">`

    `Registration`

  `</td>`

`</tr>`

</tbody>

</table>

1. Para a segunda linha dentro do elemento <tbody> vamos adicionar um elemento <tr> logo abaixo da nossa linha anterior. Em seguida, vamos adicionar um elemento <th> com o atributo de scope com um valor de linha e novamente adicionar um elemento <time> com o valor de atributo de hora e data apropriado dentro desse <th> elemento.

Após o elemento <th> vamos adicionar dois elementos <td> para os dois altifalantes apresentando naquele momento. Diretamente dentro de cada elemento <td>, vamos adicionar um elemento <a>, que irá vincular de volta para onde esse altifalante está posicionado na página Altifalantes. Lembre-se, adicionamos atributos de identificação com o nome de cada orador para os elementos pai para cada falante. Usando esse valor de atributo id precedido pelo nome de arquivo speakers.html e um sinal de libra / hash, #, podemos vincular diretamente a descrição de conversa e biografia desse falante na página Speakers.

Dentro do elemento <a>, vamos incluir um elemento <h4> com o nome do orador seguido pelo título da conversa.

O código para as duas primeiras oficinas vai parecer assim:

<table>

<thead>

`<tr>`

  `<th scope="row">`

    `Workshops`

  `</th>`

  `<td colspan="2">`

    `August 24th`

  `</td>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<th scope="row">`

    `<time datetime="08:30:00">8:30 AM</time>`

  `</th>`

  `<td colspan="2">`

    `Registration`

  `</td>`

`</tr>`

`<tr>`

  `<th scope="row">`

    `<time datetime="09:00:00">9:00 AM</time>`

  `</th>`

  `<td>`

    `<a href="speakers.html#adam-connor">`

      `<h4>Adam Connor</h4>`

      `Lights! Camera! Interaction! Design Inspiration from Filmmakers`

    `</a>`

  `</td>`

  `<td>`

    `<a href="speakers.html#jennifer-jones">`

      `<h4>Jennifer Jones</h4>`

      `What Designers Can Learn from Parenting`

    `</a>`

  `</td>`

`</tr>`

</tbody>

</table>

1. A partir daqui, podemos repetir esse padrão para cada atividade e palestrante para terminar a nossa primeira tabela e depois adicionar as próximas duas tabelas para os dois primeiros dias da conferência.

Ao fazer isso, lembre-se de que o cabeçalho da tabela sempre incluirá um cabeçalho da tabela, observando os eventos do dia e uma célula de tabela que abrange duas colunas que mostram a data.

Então, dentro do corpo de cada tabela, cada linha terá um cabeçalho de tabela que mostra a hora do dia. Após o cabeçalho da tabela será uma atividade, um altifalante ou vários altifalantes. Atividades sem altifalantes residirão dentro de um único elemento <td> que abrange duas colunas. Se apenas um orador estiver apresentando em um determinado momento, esse orador residirá dentro de um único elemento <td> que abrange também duas colunas, <a> e <h4> elementos e tudo.

Se houver dois altifalantes por um tempo determinado, cada orador residirá dentro de seu próprio elemento <td>, como antes.

O código completo para as três tabelas pode ser encontrado no final deste exercício. Para referência, a tabela para o primeiro dia, que inclui o almoço e mais dois altifalantes, parece assim:

<table>

<thead>

`<tr>`

  `<th scope="row">`

    `Workshops`

  `</th>`

  `<td colspan="2">`

    `August 24th`

  `</td>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<th scope="row">`

    `<time datetime="08:30:00">8:30 AM</time>`

  `</th>`

  `<td colspan="2">`

    `Registration`

  `</td>`

`</tr>`

`<tr>`

  `<th scope="row">`

    `<time datetime="09:00:00">9:00 AM</time>`

  `</th>`

  `<td>`

    `<a href="speakers.html#adam-connor">`

      `<h4>Adam Connor</h4>`

      `Lights! Camera! Interaction! Design Inspiration from Filmmakers`

    `</a>`

  `</td>`

  `<td>`

    `<a href="speakers.html#jennifer-jones">`

      `<h4>Jennifer Jones</h4>`

      `What Designers Can Learn from Parenting`

    `</a>`

  `</td>`

`</tr>`

`<tr>`

  `<th scope="row">`

    `<time datetime="12:30:00">12:30 PM</time>`

  `</th>`

  `<td colspan="2">`

    `Lunch`

  `</td>`

`</tr>`

`<tr>`

  `<th scope="row">`

    `<time datetime="14:00">2:00 PM</time>`

  `</th>`

  `<td>`

    `<a href="speakers.html#tessa-harmon">`

      `<h4>Tessa Harmon</h4>`

      `Crafty Coding: Generating Knitting Patterns`

    `</a>`

  `</td>`

  `<td>`

    `<a href="speakers.html#russ-unger">`

      `<h4>Russ Unger</h4>`

      `From Muppets to Mastery: Core UX Principles from Mr. Jim Henson`

    `</a>`

  `</td>`

`</tr>`

</tbody>

</table>

1. Agora que asnossas tabelas estão tomando forma, é hora de adicionar um pouco de estilo a elas. Vamos começar adicionando alguns estilos gerais aos elementos <th> e <td>. Para os elementos <th> e <td> vamos adicionar um preenchimento inferior de 22 píxeis e um alinhamento vertical do topo. Para <th> elementos especificamente, vamos adicionar um preenchimento direito de 45 píxeis, um alinhamento de texto da direita e uma largura de 20%. Então, para os elementos <td> vamos adicionar uma largura de 40%.

Abaixo da nossa tabela existente e estilos de agendamento, nosso código deve ser assim:

th,

td {

padding-bottom: 22px;

vertical-align: top;

}

th {

padding-right: 45px;

text-align: right;

width: 20%;

}

td {

width: 40%;

}

1. Em seguida, vamos modelar o cabeçalho da tabela e os elementos dentro do cabeçalho da tabela. Definiremos uma altura de linha de 44 píxeis apenas no elemento <thead>, e uma cor de # 648880 e um tamanho de fonte de 24 píxeis em todos os elementos <th> aninhados dentro de um elemento <thead>. Os nossos novos estilos incluem o seguinte:

thead {

line-height: 44px;

}

thead th {

color: #648880;

font-size: 24px;

}

1. O cabeçalho da tabela parece bom, então, adicionamos também alguns estilos para o corpo da tabela. Começaremos com <th> elementos aninhados no elemento <tbody>: alterando a sua cor, adicionando alguns estilos baseados em fontes e texto e adicionando algum preenchimento superior.

tbody th {

color: #a9b2b9;

font-size: 14px;

font-weight: 400;

padding-top: 22px;

text-transform: uppercase;

}

1. Também vamos adicionar alguns estilos aos elementos <td> aninhados no elemento <tbody>, começando com uma borda superior e preenchimento. Vamos modelar os elementos <td> que abrangem apenas uma coluna, adicionando 15 píxeis de preenchimento direto para aqueles que formam a coluna esquerda e 15 píxeis de preenchimento esquerdo para aqueles que formam a coluna direita. Fazendo isso, coloca um total de 30 píxeis de preenchimento entre as duas colunas, mantendo cada célula do mesmo tamanho. Não precisamos de aplicar qualquer preenchimento esquerdo ou direito para os elementos <td> que abrangem duas colunas.

Nós adicionaremos todos esses estofos horizontais usando os seletores de pseudo-classe de primeiro tipo: primeiro-do-tipo, último-de-tipo e: apenas de tipo. Estes seletores de pseudo-classe funcionam de forma muito semelhante ao seletor de pseudo-classe de última criança que usamos antes.

O seletor de pseudo-classe de primeiro tipo selecionará o primeiro elemento de seu tipo dentro de um elemento pai. No nosso caso, o seletor td: first-of-type selecionará o primeiro elemento <td> dentro de um elemento <tr>. Então, o seletor de pseudo-classe do último tipo selecionará o último elemento do seu tipo dentro de um elemento pai.

Novamente, no nosso caso, o seletor td: last-of-type selecionará o último elemento <td> dentro de um elemento <tr>. Por fim, o seletor de sequência de tipo único selecionará um elemento se for o único elemento de seu tipo dentro de um elemento pai. Aqui, o seletor td: only-of-type só selecionará um elemento <td> se for o único elemento <td> dentro de um elemento <tr>, como quando um elemento <td> abrange duas colunas.

Os nossos estilos são um pouco complexos, mas são flexíveis para atender às necessidades da nossa mesa. Esses novos estilos incluem o seguinte:

tbody td {

border-top: 1px solid #dfe2e5;

padding-top: 21px;

}

tbody td:first-of-type {

padding-right: 15px;

}

tbody td:last-of-type {

padding-left: 15px;

}

tbody td:only-of-type {

padding-left: 0;

padding-right: 0;

}

1. O nosso horário - e as tabelas que o exibem - estão se juntando. Vamos ajustar alguns dos estilos nos elementos existentes para limpar o design. Começaremos por tornar todos os links dentro da tabela um cinza médio. Se alvejamos apenas os elementos <a> dentro de uma tabela, os nossos títulos com o nome do orador dentro dos links permanecerão verdes, enquanto os títulos da conversa serão cinzentos, criando um bom contraste entre os dois.

Enquanto estamos ajustando os estilos das entradas para as palestras, vamos também remover a margem inferior nos elementos <h4> dentro da tabela, permitindo que o nome do orador fique mais perto de seu título. Podemos implementar esses estilos com o seguinte código:

table a {

color: #888;

}

table h4 {

margin-bottom: 0;

}

1. Por fim, vamos criar algum contraste visual entre os diferentes tipos de atividades que acontecem ao longo do dia. Todas as conversas parecem boas com as nossas últimas mudanças. Para todas as outras atividades, como registro, almoço e quebras (que estão dentro do corpo da mesa), bem como para a data (que está dentro do cabeçalho da tabela), use um cinza sutil.

Faremos isso criando uma nova classe, planejando-deslocamos e atribuindo uma cor de # a9b2b9 para ele.

.schedule-offset {

color: #a9b2b9;

}

Uma vez que a classe está no lugar, vamos adicioná-lo a todos os elementos <td> que abrangem duas colunas e incluem a data do dia ou uma atividade designada - registo, almoço ou uma interrupção. Olhando para a nossa mesa para o primeiro dia, o dia das oficinas, o HTML ficará assim:

<table>

<thead>

`<tr>`

  `<th scope="row">`

    `Workshops`

  `</th>`

  `<td class="schedule-offset" colspan="2">`

    `August 24th`

  `</td>`

`</tr>`

</thead>

<tbody>

`<tr>`

  `<th scope="row">`

    `<time datetime="08:30:00">8:30 AM</time>`

  `</th>`

  `<td class="schedule-offset" colspan="2">`

    `Registration`

  `</td>`

`</tr>`

`...`

`<tr>`

  `<th scope="row">`

    `<time datetime="12:30:00">12:30 PM</time>`

  `</th>`

  `<td class="schedule-offset" colspan="2">`

    `Lunch`

  `</td>`

`</tr>`

`...`

</tbody>

</table>

As tabelas, que podem parecer simples na superfície, podem ser bastante complexas, e esse é o caso da nossa agenda de Conferências Styles. A boa notícia é que nossa agenda está agora completa e está ótimo.

Resumo

Tudo bem, agora sabemos como estabelecer semanalmente dados tabulares dentro do HTML, ao mesmo tempo que o tornamos intuitivo com o CSS. Discussar tabelas foi o nosso último grande obstáculo na aprendizagem de HTML e CSS, e agora terminamos oficialmente o nosso site da Conferência Styles.

Para revisar, nesta lição cobrimos o seguinte:

• As melhores maneiras de criar semanalmente tabelas

• Como fazer células de tabela individuais abranger várias colunas ou linhas

• Os elementos estruturais que compõem tabelas

• Diferentes maneiras de bordas de estilo em uma tabela, e como diferentes propriedades de borda afetam a aparência de uma tabela

• Como alinhar verticalmente o texto dentro de uma tabela

Fizemos um ótimo trabalho ao utilizar todas as nossas novas habilidades, e estamos a milhas além de onde nós fazíamos algumas lições. Vamos terminar numa nota alta, amarrar algumas extremidades soltas, e olhar maneiras de escrever o nosso melhor código possível.