O que é uma tabela? É composto por células. Na tabela, o número de <td> depende do número de células embrulhadas em cada linha <tr>! Além disso, a tabela de tabela padrão não possui linha de tabela exibida no navegador antes que o estilo CSS seja adicionado;
Métodos comuns de escrita de mesa em html: A. <tr>… </tr>: Uma linha de uma tabela, existem vários pares de TR e existem várias linhas; B. <Td>… </td>: Uma célula de uma tabela, que contém vários pares de <td>… </td>, o que significa que existem várias colunas seguidas; C. <th>… </th>: uma célula na cabeça da mesa, o cabeçalho da mesa e o texto é ousado e exibido no centro; D. <tabela resumo = tabela Introdução Texto>/*O conteúdo do resumo não será exibido no navegador. Sua função é aumentar a legibilidade (semântica) da tabela, ativar os mecanismos de pesquisa para entender melhor o conteúdo da tabela e também permitir que os leitores da tela ajudem melhor os usuários especiais a ler o conteúdo da tabela. */ E.Caption Tag, adicione um título e um resumo à tabela, o título é usado para descrever o conteúdo da tabela, o local da tela do título: acima da tabela
<Tabela Border = CellPacing = CellPadding => <tr> <th> cabeçalho </th> </tr> <tr> <td> dados </td> </tr> </table>
<Tabela Border = CellPacing = CellPadding = Summary => <Portion> </ingortion> <tr> <th> hoje é sexta -feira </td> </tr> </tabela>
De volta ao tópico, voltemos ao ponto em que a diferença entre o CellPadding e o Cellpacing é a comparação entre o seguinte conjunto de imagens de tabela e código de espaço para celular:
<! Doctype html> <html> <head> <meta charset = utf-8> <title> Diferenças no celular na tabela </ititle> <estilo tipo = text/css> tabela {margem-bottom: 50px; } .Ceshi {espaçamento de borda: 20px; /*Especifica a distância entre as fronteiras das células adjacentes em uma tabela. */} </style> </ad Head> <tabela width = 600 cellpacing = 0 borderColor =#333 Border = 1> <Pion> Primeira célula </ingortion> <tr> <td> teste 1 </td> <td> teste 2 </td> <td> teste 3 </td> </trd> <tathorth> </tablenth) <Cegution> Segunda célula </gention> <tr> <td> Teste 1 </td> <td> teste 2 </td> <td> teste 3 </td> </tr> </tabela <tabela width = 600 bordercolor =#333 borda = 1 class = ceshi> <ingtion> Terceira celular <td> Teste 3 </td> </tr> </ table> </html>Comparando o código, as duas tabelas principais têm configurações diferentes, uma é 0 e a outra é 20. O resultado exibido é que a distância entre cada célula na primeira tabela é 0 e a distância entre cada célula na segunda tabela é 20. Descobrimos que esse espaço de borda: 20px; é o mesmo que o resultado do espaçamento das células = 20. Por exemplo, resumo: o atributo de espaçamento das células é usado para especificar a lacuna entre as células da tabela. O valor do parâmetro desta propriedade é um número, indicando o número de pontos de pixels ocupados pelo espaço celular.
<! Doctype html> <html> <head> <meta charset = utf-8> <title> diferenças no padding de células em tabelas </title> <style type = text/css> tabela {margin-bottom: 50px; } </style> </ad Head> <body> <tabela largura = 600px borda = 1 borderColor =#ccc CellPadding = 0> <tr> <th> sou uma tabela de células felizes </th> <th> eu sou uma tabela de células felizes = 0 <the> <the> eu sou uma tabela de células felizes </thort = 1#1#1. <tr> <th> Eu sou uma forma de célula feliz </th> <th> sou uma forma de célula feliz </th> <th> sou uma forma de célula feliz </th> <th> sou uma forma de célula feliz </th> </tr> </tabela </body> </html>A julgar pelos resultados do código acima: as duas tabelas têm valores diferentes dos códigos de padding de células. Na primeira tabela, as palavras "I Am Happy Cell" são 0 da célula onde está localizada, ou seja, porque o CellPadding = 0 está definido; Na segunda tabela, as palavras "Eu sou feliz célula" estão longe da célula onde está localizada, ou seja, a distância entre a célula onde eu sou uma célula feliz é de 20 pixels. Simplificando, quanto é o valor do padding de células igual a, quantos espaços em branco são deixados para dentro do limite das células da tabela e os elementos da célula nunca entrarão nesses espaços em branco. || Observe que a propriedade CellPadding é usada para especificar o tamanho da distância em branco entre o conteúdo da célula e o limite da célula. O valor do parâmetro dessa propriedade também é um número, indicando o número de pixels ocupados pela altura da distância em branco entre o teor de células e os limites superior e inferior e o número de pixels ocupados pela largura da distância em branco entre o teor de células e os limites esquerdo e direito.
Por exemplo, resumo: o espaço da célula representa a distância entre as células, o fadamento de células representa a distância entre o conteúdo celular e a borda; O primeiro é como margem, o último é como estofamento; ninho (célula)-o conteúdo da tabela; O preenchimento de ninhos (enchimento da mesa) (CellPadding)-representa uma distância fora do ninho, usada para separar o ninho e o espaço do ninho; Espaço de ninho (espaçamento da mesa)-representa a distância entre a borda da tabela e o enchimento do ninho, e também é a distância entre o enchimento do ninho
Expansão 1: Como mesclar linhas e colunas de uma tabela? Merge de coluna cruzada da Colspan, fusão de linhas de linhas de linhas
Exibição de código:
<! Doctype html> <html> <head> <meta charset = utf-8> <title> A diferença entre Colspan e Rowspan </title> <style type = text/css> tabela {margem: 0 auto; Margin-Bottom: 50px; Alinhamento de texto: centro; } </style> </ad Head> <body> <tabela largura = 600 celularpadding = 10 cellpacing = 2 borda = 1 borderColor =#ccc> <legtion> Exibição normal: uma linha e três colunas </ingortion> <tr> <tg> dizem algo, não sei </td> <td> siga algo, não sei </td> <tabela largura = 600 CellPadding = 10 CellPacing = 2 Border = 1 borderColor =#cc> <geption> O que devo fazer agora para exibir uma linha e duas colunas? coluna cruzada columes colunas </ingortion> <tr> <td> diga alguma coisa, não sei </td> <td colspan = 2> diga algo, não sei </td> <!-<td> diga algo, não sei </td>-> </tr> </ tabela> <!- ========================================================================================================= ========================================================================================================= ========================================================================================================= ========================================================================================================== <td> Diga algo, não sei </td> </tr> <tr> <td> diga algo, não sei </td> <td> diga algo, não sei </td> <td> diga algo, não sei </td> </tr> </tabela> <tabela width = 600 CellPadding = 10 CellPacing = 2 BorderCol = 1 CELOTCLO colunas? rowspan cross-row merge</caption> <tr> <td rowspan=2>Say something, don't know</td> <td>Say something, don't know</td> </tr> <tr> <!-- <td>Say something, don't know</td> --> <td>Say something, don't know</td> </tr> </table> </body></html>Expansão 2: Como mesclar as fronteiras da mesa? colapso da fronteira: colapso;
<!-Mesclar células da tabela-> <tipo de estilo = text/css> tabela {colapso de borda: colapso; /* colapso da borda: separado; * / /*Indica se as fronteiras de linha e células de uma tabela são unidas em uma única borda ou desapegadas como no HTML padrão. */} </style> <tabela width = 600 celularpadding = 10 cellpacing = 2 borda = 1 borderColor =#ccc> <tbody> <tr> <td> célula 1 </td> <td> célula 2 </td> <td> célula 3 </td> </tbody> </tabelaFinalmente, no navegador Chrome, o sistema de borda de tabela padrão da tabela cinza, o espaçamento da borda é 2, etc.
/* Sheet de estilo do agente do usuário* / /* tabela {display: tabela; colapso da fronteira: separado; espaçamento de borda: 2px; cor de borda: cinza; } * / / * borda = 1 padrão é igual a borda = 1px de borda-top-lar-lar: 1px; largura de fronteira: 1px; largura de borda e lareira: 1px; largura da borda-esquerda: 1px; * / /* BorderColor retorna ou define a cor da borda do objeto BorderColor: W3C - String especifica a cor da borda do elemento. Especifique um nome de cor ou código de cores RGB. */Este é o artigo sobre os detalhes da diferença entre cesllpacing e CellPadding na tabela. Para obter mais conteúdos relacionados de CesllPacing e CellPadding em tabelas, procure artigos anteriores do Wulin.com ou continue a procurar os artigos relacionados abaixo. Espero que todos apoiem o Wulin.com no futuro!