HTML Inserções de imagem em tabelas html

[Natanael Marrafon Rocha]

Estou precisando de ajuda entrei no curso de HTML + CSS e estou praticando em casa HTML eu criei um site teste apenas para testar comando e esses tipos de coisas tenho amigos que tem curso em programação também e eu estou tentando criar um quebra-cabeça

com o uso de inserção de imagem em tabelas o meu problema é esse eu criei uma div com as tabelas e estou tentando fazer ela se encaixar ja tentei todo tipo de comando html mas não consegui estou tetando as barrinhas se encaixarem acima na barra escrito "Status" e do outro lado da tabela outra barrinha preta e abaixo também para ficar só um quadrado branco no meio para mim inserir um "iframe" para mostrar o status de algo só que não estão se encaixando o meu código ficou assim 

   <div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3"><img src="status/status.jpg"/></td>
            </tr>
            <tr>
                <td><img src="status/barra-direita.jpg"/></td>
                <td><img src="status/meio-branco.jpg"/></td>
                <td><img src="status/barra-direita.jpg"/></td>
            </tr>
            <tr>
                <td colspan="3"><img src="status/barra-baixo.jpg"/></td>
            </tr>
        </table>
        </div>

 

[DiF]

@Natanael Marrafon Rocha Olá,  seja bem vindo em nosso Clube do Hardware.

 

Como você é iniciante, eu dou um desconto.  rsrs Vamos lá.

 

A maneira ideal é utilizar  apenas um método de montagem do layout. No caso, se é tableless ou não. Você está misturando o tableless com o método sem para criar a estrutura. 

 

Partindo desse ponto, você pode usar o elemento DIV com um background desejado e dentro deste elemento, você vai por o elemento iframe, ou se não quiser usar imagens podes usar um método bastante comum de sobreposição de elementos.

 

Então, ao invés de usar tabelas  que normalmente se usam para dados tablulares( não necessariamente criar uma estrutura de layout com tabela seja errado, é apenas um método antigo), você vai usar o próprio elemento div com um background.

O que isso implica?  desempenho. é mais rápido carregar uma imagem de background do que 4 ou 5.

 

Aqui deixo um exemplo dessa caixa de status usando uma imagem background  e outro exemplo não usando imagens.

Com imagem de fundo:  https://jsfiddle.net/feac3osk/

 

Sem imagem de fundo: https://jsfiddle.net/fzeos2um/

 

Particularmente, recomendo a segunda, porque não usa imagens, tudo é gerado por CSS.

 

 

[Natanael Marrafon Rocha]

15 horas atrás, DiF disse:

@Natanael Marrafon Rocha Olá,  seja bem vindo em nosso Clube do Hardware.

 

Como você é iniciante, eu dou um desconto.  rsrs Vamos lá.

 

A maneira ideal é utilizar  apenas um método de montagem do layout. No caso, se é tableless ou não. Você está misturando o tableless com o método sem para criar a estrutura. 

 

Partindo desse ponto, você pode usar o elemento DIV com um background desejado e dentro deste elemento, você vai por o elemento iframe, ou se não quiser usar imagens podes usar um método bastante comum de sobreposição de elementos.

 

Então, ao invés de usar tabelas  que normalmente se usam para dados tablulares( não necessariamente criar uma estrutura de layout com tabela seja errado, é apenas um método antigo), você vai usar o próprio elemento div com um background.

O que isso implica?  desempenho. é mais rápido carregar uma imagem de background do que 4 ou 5.

 

Aqui deixo um exemplo dessa caixa de status usando uma imagem background  e outro exemplo não usando imagens.

Com imagem de fundo:  https://jsfiddle.net/feac3osk/

 

Sem imagem de fundo: https://jsfiddle.net/fzeos2um/

 

Particularmente, recomendo a segunda, porque não usa imagens, tudo é gerado por CSS.

 

 

Eu entendi o que você fez voce colocou a imagem inteira usando background e apenas citou no meio na imagem o tamanho do iframe, então eu estava tentando fazer as partes das bordas se juntarem com a tabela apenas usando HTML e eu pesquesei na internet e consegui achar uma solução eu apenas pintei as bordas das tabelas de preto, mas nossa obrigado eu nem tinha noção de como fazer da forma mais simples usando CSS , olha a imagem e o código apenas acrescentei a tag bgcolor e coloquei da mesma cor da imagem, mas é claro que isso não daria certo de fosse por exemplo com textura a caixa 

  <table align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
            <tr>
                <td colspan="3"><img src="status/status.jpg"/></td>
            </tr>
            <tr>
                <td><img src="status/barra-direita.jpg"/></td>
                <td><iframe src="teste.html" width="250" height="152"></iframe></td>
                <td><img src="status/barra-direita.jpg"/></td>
            </tr>
            <tr>
                <td colspan="3"><img src="status/barra-baixo.png"/></td>
            </tr>
            <tr>