How to place the table in a certain position

Question

How to place the table in a certain position

Navigation

#1 by (0 votes)

0

Well I created a main div and put a left and right part, and I'll make a Brazilian table in the right part, and on the left what I'll put in the image below

My code

<!DOCTYPE html>
<html>
 <head>
   <title>Teste</title>
   <link rel="stylesheet" type="text/css" href="teste.css">
</head>
<body>
  <div id="principal">
     <div id="direita">
        <table>
    <tr>
          <td>Clube</td>
          <td>P</td>
          <td>V</td>
          <td>E</td>
          <td>D</td>
          <td>GP</td>
          <td>GC</td>
          <td>SG</td>
    </tr>
    <tr>    
     </td>
      <td> 1 <img src="fla.png"  width="30" height="30"> Flamengo</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
</table>
    </div>
    <div id="esquerda">

        <br/><br/><br/><br/><p><b>Detalhes da tabela</b></p>
        <table>
            <tr>
                <td>Clube</td>
            </tr>
            <tr>
                <td> 1 <img src="fla.png"  width="30" height="30"> Flamengo</td>
            </tr>
            <tr>
                <td> 2 <img src="fla.png"  width="30" height="30"> Flamengo</td>
            </tr>
            <tr>
                <td> 3 <img src="fla.png"  width="30" height="30"> Flamengo</td>
            </tr> 
        </table>
    </div>
</div>

My css

#principal{
 width:  1340px;
 height:1400px;
}

 #direita{
  width: 670px;
  height: 1400px;
  float:left
 }
 #esquerda{
  width: 670px;
  height: 1400px;
  float: left;
 }
 table{
   border-spacing: 0px;
 }

 th, td {
    padding: 15px;
    text-align: left;
  }
 td{
   border-bottom: 1px solid #ddd;
 }
 td:nth-child(1) {
 width: 50%;
 text-align: left;
 }

What I can not do is this part circled

html css

asked by anonymous 15.09.2018 / 00:24

1 answer

How to use an AND condition with CSS selectors? Encapsulate set of HTML tags in VS Code ("ctrl + alt + enter" in Sublime Text)

score 0 · Answer 1

I would split your right div into two more, then the top would put the clubs, and the bottom of the table. Merely illustrative example:

html

<!DOCTYPE html>
<html>
 <head>
   <title>Teste</title>
   <link rel="stylesheet" type="text/css" href="teste.css">
</head>
<body>
  <div id="principal">
     <div id="direita">
        <table>
    <tr>
          <td>Clube</td>
          <td>P</td>
          <td>V</td>
          <td>E</td>
          <td>D</td>
          <td>GP</td>
          <td>GC</td>
          <td>SG</td>
    </tr>
    <tr>    
     </td>
      <td> 1 <img src="fla.png"  width="30" height="30"> Flamengo</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
</table>
    </div>
    <div id="esquerda">
        <div id="acima">
        <br/><br/><br/><br/><p><b>Detalhes da tabela</b></p>
        <table>
            <tr>
                <td>Clube</td>
            </tr>
            <tr>
                <td> 1 <img src="fla.png"  width="30" height="30"> Flamengo</td>
            </tr>
            <tr>
                <td> 2 <img src="fla.png"  width="30" height="30"> Flamengo</td>
            </tr>
            <tr>
                <td> 3 <img src="fla.png"  width="30" height="30"> Flamengo</td>
            </tr> 
        </table>
        </div>
    <div id="abaixo">

        <br/><br/><br/><br/><p><b>Detalhes da tabela</b></p>
        <table>
            <tr>
                <td>Clube</td>
            </tr>
            <tr>
                <td> 1 <img src="fla.png"  width="30" height="30"> Flamengo</td>
            </tr>
            <tr>
                <td> 2 <img src="fla.png"  width="30" height="30"> Flamengo</td>
            </tr>
            <tr>
                <td> 3 <img src="fla.png"  width="30" height="30"> Flamengo</td>
            </tr> 
        </table>
    </div>
    </div>
</div>

css:

#principal{
 width:  100%;
 height:100%;
}

 #direita{
  width: 60%;
  height: 100%;
  float:left
 }
 #esquerda{
  width: 40%;
  height: 100%;
  float: left;
 }
 #abaixo{
  width: 100%;
  height: 50%;
  float: left;
 }
  #acima{
  width: 100%;
  height: 50%;
  float: left;
 }
 table{
   border-spacing: 0px;
 }

 th, td {
    padding: 15px;
    text-align: left;
  }
 td{
   border-bottom: 1px solid #ddd;
 }
 td:nth-child(1) {
 width: 50%;
 text-align: left;
 }