Insert css image into HTML tables

Question

Insert css image into HTML tables

Asked 5 years, 8 months ago

Viewed 2,516 times

1

Good morning, I would like to insert an image inside a column in the table, leaving it in the center.

The most I could do is according to code below, but this way it stays with a border around as if it were an extra column.

.Red {
  height: 20px;
  width: 20px;
  background-color: red;
}

.Yellow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid yellow;
}

.Verde {
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
}

<table border="1" border border-bottom="1" border-left="double" border-right="1" border-top="1" border-bottom-style="solid" cellpadding="0" cellspacing="0">
  <tr>
    <td width="300" border="0" colspan="2">Teste Amarelo</td>
    <td width="300" colspan="2">Teste Verde</td>
    <td width="300" colspan="2">Teste Vermelho</td>
  </tr>

  <tr>
    <td class="Yellow" width="20"></td>
    <td width="280"></td>
    <td class="Verde" width="20"></td>
    <td width="280"></td>
    <td class="Red"></td>
    <td width="280"></td>
  </tr>
</table>

Your text doesn’t match your example. You say you want to insert an image in the column, but in the code you make the column itself be image; apart from the fact that you literally defined 6 columns and it was strange that you "created extra columns". Got very confused.

– Woss

2019/02/27 at 12:20
You have already tried to put the image in . png format?

– Rafael

2019/02/27 at 12:43
It was the only way I could insert the image into the column, as an image I couldn’t make appear as well. The various columns are to stay in the size I want, but I know it’s not the right way to do it

– Guilherme Montagnani

2019/02/27 at 12:52
Dude because you don’t put a <img> tag or even a <div> tag inside the TD and align it the way you want it. I couldn’t really understand what you want...

– hugocsl

2019/02/27 at 14:59
I have a jsp that will bring the status name (Red, Green, Yellow) I need that inside the column in place of this variable appear the sign referring to the lighthouse. With Divs inside the TD I haven’t tried but with the img tag I can’t reference the variable (at least I don’t know how to do)

– Guilherme Montagnani

2019/02/27 at 15:01

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-02-27T18:53:01+00:00

I don’t know if this is exactly what you wanted, but see what you can use text-align: center and vertical-align: middle to centralize elements within the td and does not need to stylize directly the td, because if vc thus vc will get "stuck" in the layout of the cell itself, then the indicated is that an element is used inside the td.

.Red {
    height: 20px;
    width: 20px;
    background-color: red;
    display: inline-block;
}

.Yellow {
    width: 100%;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid yellow;
}

.Verde {
    height: 20px;
    width: 20px;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
}
* {
    box-sizing: border-box;
}
img {
    display: block;
}
table {
    table-layout: fixed;
    border-collapse: collapse;
}
td {
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
    width: calc(100% / 6);
}

<table>
    <tr>
        <td width="300" colspan="2">Teste Amarelo</td>
        <td width="300" colspan="2">Teste Verde</td>
        <td width="300" colspan="2">Teste Vermelho</td>
    </tr>
    <tr>
        <td><div class="Red"></div></td>
        <td>123</td>
        <td><img src="https://placecage.com/100/100"></td>
        <td>345</td>
        <td><div class="Verde"></div></td>
        <td>789</td>
    </tr>
</table>