How to make a panel with double information with <tr>

Asked

Viewed 523 times

0

I can understand basic handling of <tr>, as in the example below where we have information on each line. 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid pink;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Opção 1</th>
    <th>Opção 2</th>
  </tr>
  <tr>
    <td>x</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>x</td>
  </tr>
</table>

</body>
</html>

But how can I use the <tr> to achieve the result of the example below? Where I put two information in the same row (title and subtitle) and both in the same column?

inserir a descrição da imagem aqui

html html5

  • It’s not just adding two columns?

  • @Marconi I want to leave two texts. One below the other being title and subtitle, in the same column and in the same line where you will have the other components.

  • You cannot tag each text p for example?

  • something like this (very basic only to illustrate): http://jsfiddle.net/6fpwm52s/2/

  • @Ricardopunctual yes

  • The example given as an image does not appear to be tabular data. Why are you using tables?

  • @Andersoncarloswoss sorry but, what would be tabular data? there is difference than approach in a table/ in a list?

  • 2

    @hunterxhunter These are data that belongs to a table. Tables are used to present data that have correlation so that they can be analyzed and/or compared. For example, a price list of different plans, where you present the characteristics and values of each one. A list of items is not a table. The difference is in the semantics of your page: a list would be better defined with the elements <ul>, <ol> or even a set of <div>, depending on the context.

  • 3

    You can draw a door on a wall and tell me it’s a door. I’ll believe it’s a door, because it looks like a door, but it’s a wall - that sums up the semantics of HTML.

  • @Andersoncarloswoss his last example made me understand well, thank you. I will study more about it.

Show 5 more comments

3 answers

0

To do this you need to use two Divs with CSS. The default div already has line breaking with display: block. as an example you can reach your obese:

   
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid pink;
}
.title{
font-weight: bold;
font-size: 20px;
}
.sub-title{
font-size: 12px;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Opção 1</th>
    <th>Opção 2</th>
  </tr>
  <tr>
    <td>x</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td><div class="title">TITULO</div><div class="sub-title">SUB-TITULO</div></td>
  </tr>
</table>

</body>
</html>

  • can you be more specific? and preferably use a verifiable model? I’m learning and talking like this doesn’t help me much.

  • yes I will post an example to Voce

  • 2

    Instead of defining the classes "title" and "Subtitle", why not use the elements <h*> and thus maintain HTML semantics?

0


Dude, basically you add an extra column. The css I added was just to look similar to your image. Remember th and td do not respect only the margin td respects padding preferred to align elements internally.

td {
  padding-bottom: 50px;
  vertical-align: top;
}

img {
  background-color: gray;
  margin-right: 15px;
  width: 50px;  
  height: 50px;
}

h4, p {
  font-family: Arial;
  margin: 0;
}

p {
  font-size: 12px;
}
<table>
  <tr>
    <td>
      <img src="">
    </td>
    <td>
      <h4>Hunter xhunter</h4>
      <p>usuário Stack Overflow Em PT</p>
    </td>
  </tr>
  <tr>
    <td>
      <img src="">
    </td>
    <td>
      <h4>Hunter xhunter</h4>
      <p>usuário Stack Overflow Em EN</p>
    </td>
  </tr>
</table>

  • 1

    Exactly this, I put it here and it worked, but just one more thing, how do I give a small spacing between the image and the words? Because in mine they stuck together.

  • 1

    You should use a margin-right in the image as in the example because the td and tr do not respect margin, you could change the display to a more flexible but I think it is not your case.

  • 1

    enlightening. Thank you

0

If you need to use <table>, settle only with HTML and you really need to separate the title and the text into two lines... You can use rowspan and colspan.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid pink;
}
</style>
</head>
<body>

<table>
  
  <!--Inicio Bloco -->
  <tr>  
    <td rowspan="2"><img src="https://via.placeholder.com/140x100"></td>    
    <td height="1px"><b>Hunter xhunter</b></td>
   </tr>
  <tr>
    <td valign="top">Hunter usuário Stack Overflow em PT</td>
  </tr>
  <!--Fim Bloco -->
  
  <tr><td colspan="2" height="10px"></td></tr>
  
  <!--Inicio Bloco -->
  <tr>  
    <td rowspan="2"><img src="https://via.placeholder.com/140x100"></td>    
    <td height="1px"><b>Hunter xhunter</b></td>
   </tr>
  <tr>
    <td valign="top">Hunter usuário Stack Overflow em PT</td>
  </tr>
  <!--Fim Bloco -->
  
</table>

</body>
</html>

Browser other questions tagged html html5

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