Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Eleonterio Carbonel

HTML HTML5 - Tabelas inserindo um espaço nas figuras.

Recommended Posts

Olá galera do fórum, estou com a seguinte dúvida, conforme a imagem em anexo, tenho uma tabela que irá receber dados do banco de dados, ocorre que dentro da tabela preciso incluir uma imagem (botão) que servirá para editar estes dados, meu problema é que logo abaixo da imagem, o html insiste em incluir um espaço vazio dentro da tabela, já editei o código de n maneiras mas não tem como tirar esse espaço, abaixo o código.

HTML:

        <table id="listagem">
         <thead>
                <tr id = "titulo">
                        <th id = "A">A</th>
                        <th id = "B">B</th>
                        <th id = "V">C 1</th>
                        <th id = "D">D 2</th>
                        <th id = "E">E/Excluir</th>
                </tr>
        </thead>
        <tbody>
                <tr id = "tabela">
                        <td id = "A">A</td>
                        <td id = "B" >B</td>
                        <td id = "V">C</td>
                        <td id = "D">D</td>
                        <td id = "E"><img id = "voltar" src="img/volta.png"></td>
                </tr>
        </tbody>
        </table>
        <br>

        
     

  CSS:


    
    table#listagem
    {
        border: hidden;
        border-spacing: 1px;
        background: #888888;
        width: 768px;
        margin-left: auto;
        margin-right: auto;
    }
    table#listagem tr#titulo
    {
        font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
        font-size: 14px;
        height: 30px;
        text-align: center;
        background-color: #CCCCCC;
        color: #333333;
    }

    table#listagem tr#tabela
    {
        font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
        font-size: 14px;
        height: auto;
        text-align: center;
        background-color: #DDDDDD;
        color: #333333;
    }

    table#listagem td#A
    {
        width: 75px;
    }

    table#listagem td#B
    {
        width: 300px;
    }

    table#listagem td#C
    {
        width: 125px;
    }    

    table#listagem td#D
    {

        width: 125px;
    }

    table#listagem td#E
    {
        width: 100px;
        vertical-align: middle;
    }

 

 

Tabela HTML5.png

Editado por DiF
Separar o css do html e acrescentar a coloração certa

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Eleonterio Carbonel Isso acontece por causa da herança dos outros elementos. Mesmo que a imagem seja pequena, se a célula acima tem o tamanho maior, vai aparecer esse espaço.

 

Além disso, vejo erros no seu CSS.   ID não pode ser repetida.

No caso, você deve trocar todos seus ID do elemento TH e TD para CLASS.

 

PS: em tabelas, se é um botão de editar ou excluir, não tem problema ter esse espaço.  O melhor é deixar a imagem centralizada. Ou colocar uma imagem que pegue o tamanho total do elemento.

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • Obrigado pela resposta amigo.

     

    O problema é que mesmo uma imagem que pegue o tamanho total daquele elemento, ainda assim aquele espacinho embaixo fica aparecendo, já pensei até em usar div ao invés de tabela, mas nesse caso entendo que não seria correto visto que eu vou pegar elementos do banco de dados então entendo como correto a tabela, enfim vou acabar tendo que deixar esse espaço.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @Eleonterio Carbonel Na verdade não é correto e nem errado.

     

    Você pode criar sua tabela com "div"  usando o css e o display: table  e derivados "table-cell e table-row.

     

    O lance é que pode estar tendo algum conflito por causa dos IDs que estão sendo repetidos.

    Faça o teste.  retire toda a estilização e veja se some o espaço da imagem.

    Se sim, fica comprovado que era problema de regras no CSS.

     

     O que pode acontecer é que sua imagem contenha uma parte branca.... 

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×