How to make a panel with double information with tr

Question

How to make a panel with double information with tr

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

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 <tr> to achieve the result of the example below? Where do I put two information on the same line (title and subtitle) and both in the same column?

html html5

asked by anonymous 25.07.2018 / 15:42

3 answers

1

To do this you need to use two divs with CSS. The div by default already has line break with display: block. by example you can achieve your goal:

   
<!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>

25.07.2018 / 15:53

0

If you need to use <table> , only resolve with HTML and you really need to separate the title and text in 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><tdheight="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><tdheight="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>

25.07.2018 / 16:05

Query Result to be Zero Transform the results of an HTML form into HASH with JQuery and JavaScript

score 0 · Accepted Answer

Basically you add 1 more column. The css that I added was just to look similar to your image. Remember th and td do not respect margin only td respect padding preferably 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>