How to place the table in a certain position

Asked

Viewed 400 times

0

Well I created a main div and I put a left and right part, and I will make a table of the Brasileirão on the right, and on the left what I will 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’m failing to do is this circular part

Exemplo

html css

1 answer

0

I would divide your right div into two more, then the top one would put the club share, and the bottom one 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;
 }

Browser other questions tagged html css

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