0

Bom eu criei uma div principal e coloquei uma parte esquerda e direita, e vou fazer uma tabela do brasileirão na parte direita, e na esquerda o que colocarei na imagem abaixo

Meu código

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

Meu 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;
 }

O que eu não estou conseguindo fazer é essa parte circulada

Exemplo

1 Resposta 1

0

Eu repartiria sua div direita em mais duas, aí na de cima colocaria a parte dos clubes, e na de baixo a tabela. Exemplo meramente ilustrativo:

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;
 }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .