HTML e CSS para tabela

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido HTML e CSS para tabela

Mensagem por Gold Of Olympus 02.04.17 3:30

Detalhes da questão


Endereço do fórum: http://goldofolympus.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Oi, estou com dificuldade em montar a seguinte tabela:

HTML e CSS para tabela DUXwvWY

Porém, gostaria que quando o mouse passasse em cima dos retângulos, a pontuação subisse em efeito hover para o centro do retângulo onde o mouse estiver e a imagem do retângulo fique desfocada xD Alguém que entenda de html e css pode me ajudar, por favor?


Última edição por Gold Of Olympus em 14.04.17 22:31, editado 1 vez(es)
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Luiz 02.04.17 14:24

Olá,

Eu não entendi muito bem o que a senhora deseja..
Poderia ser mais específica?

Tchau
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 02.04.17 19:19

Gostaria de ajuda para criar esse table como especifiquei acima
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Luiz 02.04.17 21:47

Olá,

CSS:
Código:
table.my-table {
  border: solid 3px #000;
}

.my-table td {
  border-right: solid 3px #000;
  padding: 10px;
}

.my-table td:last-child {
  border-right: 0px!important;
}
Insira este CSS em sua Folha de Estilo.

A tabela:
Código:
[table class="my-table"][tr]
[td] TEXTO COLUNA 1 [/td]
[td] TEXTO COLUNA 2 [/td]
[td] TEXTO COLUNA 3 [/td]
[td] TEXTO COLUNA 4 [/td]
[td] TEXTO COLUNA 5 [/td]
[td] TEXTO COLUNA 6 [/td]
[/tr]
[/table]

Tchau
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 03.04.17 3:58

Não tem como deixar a segunda parte com html? ><
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Kyo Panda 03.04.17 18:01

No caso do BBCode table, é só trocar [] por <>:

Código:
[table class="my-table"][tr]
[td] TEXTO COLUNA 1 [/td]
[td] TEXTO COLUNA 2 [/td]
[td] TEXTO COLUNA 3 [/td]
[td] TEXTO COLUNA 4 [/td]
[td] TEXTO COLUNA 5 [/td]
[td] TEXTO COLUNA 6 [/td]
[/tr]
[/table]

Código:
<table class="my-table"><tr>
<td> TEXTO COLUNA 1 </td>
<td> TEXTO COLUNA 2 </td>
<td> TEXTO COLUNA 3 </td>
<td> TEXTO COLUNA 4 </td>
<td> TEXTO COLUNA 5 </td>
<td> TEXTO COLUNA 6 </td>
</tr>
</table>
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 03.04.17 21:02

Estou tentando alterar o width de cada coluna, mas não funciona D= Ajuda? E pode ajudar a colocar o efeito hover que pedi?

Código:
<table class="my-table"><tr>
<td> TEXTO COLUNA 1 </td>
<td> TEXTO COLUNA 2 </td>
<td> TEXTO COLUNA 3 </td>
<td> TEXTO COLUNA 4 </td>
<td> TEXTO COLUNA 5 </td>
<td> TEXTO COLUNA 6 </td>
</tr>
</table>

<style type="text/css">
table.my-table {
  border: solid 3px #000;
  width: 100px !important;
  height: 150px;
}
 
.my-table td {
  border-right: solid 3px #000;
  padding: 10px;
  width: 100px !important;
  height: 150px;
}
 
.my-table td:last-child {
  border-right: 0px!important;
}</style>
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Luiz 03.04.17 21:08

Olá,

Por ser uma tabela, nem sempre é possível alterar o
width
, pois muitas vezes, ela ficaria bugada, o que acaba por não permitir essa alteração. Quanto mais
<td>
você adiciona, menor será o espaço de cada um.

Quanto ao efeito
hover
, infelizmente, eu não entendi muito bem. A senhora poderia explicar melhor, por gentileza?

Tchau


Última edição por Luiz~ em 03.04.17 23:30, editado 1 vez(es)
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 03.04.17 22:26

Como assim? Se tem como aumentar, não deveria ter como diminuir?
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Luiz 03.04.17 23:35

Na verdade, há com diminuir, basta a senhora remover as coluna (<td>'s), ou diminuir via CSS.
Em contrapartida, quanto mais coluna (<td>'s), que a senhora for adicionando, menor é o espaço entre elas, entende?

Quanto ao efeito CSS, poderia dar uma explicação diferente da que a senhora deu na primeira mensagem, pois não consegui entender muito bem o que desejas. Envergonhado

Tchau
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Kyo Panda 04.04.17 12:13

Coluna 1Coluna 2Coluna 3

Coluna 1Coluna 2Coluna 3

Coluna 1Coluna 2Coluna 3

Código:
<table style="table-layout: fixed; width: 25%; border: 1px #333 solid; text-align: center;">
   <tr>
      <td>Coluna 1</td>
      <td>Coluna 2</td>
      <td>Coluna 3</td>
   </tr>
</table>

<table style="table-layout: fixed; width: 50%; border: 1px #333 solid; text-align: center;">
   <tr>
      <td>Coluna 1</td>
      <td>Coluna 2</td>
      <td>Coluna 3</td>
   </tr>
</table>

<table style="table-layout: fixed; width: 100%; border: 1px #333 solid; text-align: center;">
   <tr>
      <td>Coluna 1</td>
      <td>Coluna 2</td>
      <td>Coluna 3</td>
   </tr>
</table>

A largura funciona normal nas tabelas. Verifique se não há outro CSS influenciando na largura.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 04.04.17 21:33

O código do Kyo funcionou e em resposta a ele: estou testando o code no htmlinstant, agora só falta o efeito em cada uma das colunas: https://i.imgur.com/l3X4sau.png Esse é o desenho que imagino e, para quem não entendeu, antes da flecha do desenho é sem o mouse em cima, depois é com o mouse em cima... Não dá pra explicar melhor do que isso x_x
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 07.04.17 19:32

Up pra não darem como eu que abandonei, mesmo sendo o povo que parou de dar solução =x
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Luiz 07.04.17 19:35

Olá,

A senhora tem que lembrar que somos voluntários, e que não somos obrigados à manter o tópico ativo.
Quanto à sua questão:

Poderia nos fornecer o link de um tópico com tal tabela em seu fórum?

Inté. o/
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 09.04.17 19:00

Eu ainda não coloquei tabela no tópico, estou com dificuldades para criar uma, como especifiquei na descrição do tópico ^^
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Kyo Panda 10.04.17 19:37

Tente:

Código:
<table class="minha-tabela">
  <tr>
    <td class="minha-tabela-col-1">
      <span>Pontos: 66</span>
    </td>
    <td class="minha-tabela-col-2">
      <span>Pontos: 67</span>
    </td>
    <td class="minha-tabela-col-3">
      <span>Pontos: 68</span>
    </td>
  </tr>
</table>

Código:
.minha-tabela {
  table-layout: fixed;
  width: 100%;
}

.minha-tabela td {
  position: relative;
  height: 300px;
  width: 33%;
}

.minha-tabela span {
  position: absolute;
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
  text-align: center;
  font-weight: 700;
  tranform: translate(0, -50%);
  display: none;
}

.minha-tabela td:hover span {
  display: block;
}

.minha-tabela td:before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
}

.minha-tabela td:hover:before {
  filter: blur(10px);
}

.minha-tabela-col-1:before {
  background-image: url(https://unsplash.it/200/300/?random&1);
}

.minha-tabela-col-2:before {
  background-image: url(https://unsplash.it/200/300/?random&2);
}

.minha-tabela-col-3:before {
  background-image: url(https://unsplash.it/200/300/?random&3);
}

https://jsfiddle.net/oot1wnxb/

o/
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 11.04.17 23:09

Apliquei o code

Código:
<table class="minha-tabela">
  <tr>
    <td class="minha-tabela-col-1">
      <span>Pontos: 66</span>
    </td>
    <td class="minha-tabela-col-2">
      <span>Pontos: 67</span>
    </td>
    <td class="minha-tabela-col-3">
      <span>Pontos: 68</span>
    </td>
  </tr>
</table>

<style type="text/css">.minha-tabela {
  table-layout: fixed;
  width: 100%;
}
 
.minha-tabela td {
  position: relative;
  height: 300px;
  width: 33%;
}
 
.minha-tabela span {
  position: absolute;
  left: 0;
  right: 0;
  position: absolute;
  top: 50%;
  text-align: center;
  font-weight: 700;
  tranform: translate(0, -50%);
  display: none;
}
 
.minha-tabela td:hover span {
  display: block;
}
 
.minha-tabela td:before {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
}
 
.minha-tabela td:hover:before {
  filter: blur(10px);
}
 
.minha-tabela-col-1:before {
  background-image: url(https://unsplash.it/200/300/?random&1);
}
 
.minha-tabela-col-2:before {
  background-image: url(https://unsplash.it/200/300/?random&2);
}
 
.minha-tabela-col-3:before {
  background-image: url(https://unsplash.it/200/300/?random&3);
}</style>

Mas não resultou x_x

Print do resultado:

HTML e CSS para tabela 5GFA1IH
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Kyo Panda 12.04.17 15:25

A senhora poderia criar essa mensagem no seu fórum para verificarmos o que acontece? Provavelmente existe algum CSS (ou Javascript) interferindo na tabela.
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 13.04.17 0:43

Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Kyo Panda 13.04.17 12:35

O <style> parece não funcionar diretamente no post com quebras de linha. Tente minificar o CSS quando for aplicá-lo num post:

Código:
<style>.minha-tabela{table-layout:fixed;width:100%}.minha-tabela td{position:relative;height:300px;width:33%}.minha-tabela span{left:0;right:0;position:absolute;top:50%;text-align:center;font-weight:700;tranform:translate(0,-50%);display:none}.minha-tabela td:hover span{display:block}.minha-tabela td:before{content:' ';position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:no-repeat;background-position:center center}.minha-tabela td:hover:before{filter:blur(10px)}.minha-tabela-col-1:before{background-image:url(https://unsplash.it/200/300/?random&1)}.minha-tabela-col-2:before{background-image:url(https://unsplash.it/200/300/?random&2)}.minha-tabela-col-3:before{background-image:url(https://unsplash.it/200/300/?random&3)}</style>
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 13.04.17 20:11

Quase perfeito '*-*' só preciso colocar uma transição pra ficar mais suave, ajuda? ;-;

Código:
<style>.minha-tabela{table-layout:fixed;width:100%}.minha-tabela td{position:relative;height:300px;width:33%}.minha-tabela span{left:0;right:0;position:absolute;top:50%;text-align:center;font-weight:700;tranform:translate(0,-50%);display:none}.minha-tabela td:hover span{display:block}.minha-tabela td:before{content:' ';position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:no-repeat;background-position:center center}.minha-tabela td:hover:before{filter:blur(10px)}.minha-tabela-col-1:before{background-image:url(https://unsplash.it/200/300/?random&1)}.minha-tabela-col-2:before{background-image:url(https://unsplash.it/200/300/?random&2)}.minha-tabela-col-3:before{background-image:url(https://unsplash.it/200/300/?random&3)}</style>

<table class="minha-tabela">
 <tr>
   <td class="minha-tabela-col-1">
     <span>Pontos: 66</span>
   </td>
   <td class="minha-tabela-col-2">
     <span>Pontos: 67</span>
   </td>
   <td class="minha-tabela-col-3">
     <span>Pontos: 68</span>
   </td>
 </tr>
</table>
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Kyo Panda 13.04.17 20:25

Animação de blur tende a ser um pouco pesada, por isso nem coloquei. Mas se desejar:

Código:
<style>.minha-tabela{table-layout:fixed;width:100%}.minha-tabela td{position:relative;height:300px;width:33%}.minha-tabela span{left:0;right:0;position:absolute;top:50%;text-align:center;font-weight:700;tranform:translate(0,-50%);opacity:0;transition:.5s opacity}.minha-tabela td:hover span{opacity:1}.minha-tabela td:before{content:' ';position:absolute;top:0;right:0;bottom:0;left:0;background-repeat:no-repeat;background-position:center center;transition:.5s filter}.minha-tabela td:hover:before{filter:blur(10px)}.minha-tabela-col-1:before{background-image:url(https://unsplash.it/200/300/?random&1)}.minha-tabela-col-2:before{background-image:url(https://unsplash.it/200/300/?random&2)}.minha-tabela-col-3:before{background-image:url(https://unsplash.it/200/300/?random&3)}</style>
 
<table class="minha-tabela">
 <tr>
  <td class="minha-tabela-col-1">
    <span>Pontos: 66</span>
  </td>
  <td class="minha-tabela-col-2">
    <span>Pontos: 67</span>
  </td>
  <td class="minha-tabela-col-3">
    <span>Pontos: 68</span>
  </td>
 </tr>
</table>
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Gold Of Olympus 14.04.17 22:31

Resulta, muito obrigada, Kyo sz
Gold Of Olympus

Gold Of Olympus
***

Membro desde : 17/07/2016
Mensagens : 112
Pontos : 172

http://goldofolympus.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: HTML e CSS para tabela

Mensagem por Kyo Panda 17.04.17 12:29

HTML e CSS para tabela Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos