1 2 3 4
1 2 3 4
1 2 3 4

Tabela 1. Esta simples tabela tem um fundo definido como transparent e uma cor cinza bem clarinha pra o fundo das tds.

Sim, você não precisa ficar restrito às bordas padrão do HTML para as tabelas, pois através de definições de estilos por CSS, para bordas você poderá estilizá-las ao seu gosto. Você pode alterar cores e tipos de bordas, colocá-las só na vertical ou horizontal e definí-las sólidas, pontilhadas, tracejadas ou outras opções.

1 2 3 4
1 2 3 4
1 2 3 4

Tabela 2. De acordo com os dados contidos na tabela você poderá dar maior ênfase às linhas horizontais ou às colunas verticais.

Heading 1 Heading 2 Heading 3 Heading 4
1 2 3 4
1 2 3 4

Tabela 3. Aqui um efeito de alto relevo em 3D conseguido através de definições de estilos para as cores das bordas. Para as linhas do cabeçalho da tabela foi definida uma cor escura.

Um outro 'truque' que talvez você queira experimentar é o de definir um fundo gradiente para as trs, através de uma imagem.

Se você construir uma pequena imagem com altura suficiente para completar a célula e uma largura bem reduzida, digamos de 8 pixels, você poderá definir uma regra CSS para que a imagem se repita na horizontal dentro da célula assim; background-repeat: repeat-x - bem mais interessante do que bordas.

table background Esta pequena imagem (227 bytes) repete-se horizontalmente...

Row 1 2 3 4
Row 1 2 3 4
Row 1 2 3 4
Row 1 2 3 4

Tabela 4. Usei um gradiente para as linhas do cabeçalho e uma borda esquerda na cor cinza clara para separar as colunas.

Se você desejar estilizar células individualmente de modo diverso das demais na tabela, poderá usar estilos inline definido na tag de abertura <td>.

<td style="background-color: #f00">cell 1</td>
1 2 3 4
2 3 4
1 2 3
1 2 3 4

Tabela 5. OK, eu sou um fã de Mondrian, mas minha intenção aqui é demonstrar que se você quiser, poderá estilizar as células da tabela individualmente.

Usando estilização inline tem a desvantagem de que você não poderá controlar os estilos por um arquivo externo, é uma tarefa trabalhosa codificar direto na página, mas em determinadas circunstências isto é admissível. Uma prática melhor para estilizar linhas ou colunas, consiste em colocá-las dentro de suas próprias divs e se referenciar a elas como...


#col1 td { ... }

#col2 td { ... }

Com esta prática você terá um maior controle sobre os estilos, sem ter que abrir mão de suas tabelas em favor de divs.

Eu não coloquei todas as declarações de estilos na página; existem muito mais, porém se você olhar o código fonte da página verá como ampliar isto.

As possibilidades de estilização de tabelas são muitas. Quem disse que as tabelas tem que ser entediantes?