HTML – colspan e rowspan

28/11/2016 | Destaque, HTML

Olá, nesse pequeno tutorial vamos entender o uso de tabelas HTML, mais os atributos colspan e rowspan. Para iniciarmos precisamos de uma base html como essa aqui embaixo:

<!DOCTYPE html>
    <html>
        <head>
            <title> Edutoria </title>
        </head>
    <body>
    </body>
 
   </html>

Em seguida devemos trabalhar a tag table dentro do BODY, declarando assim a criação de uma tabela, devemos entender que tabelas são feitas de linhas e colunas e que para declarar cada uma devemos usar as tags TD para linhas e TR para colunas como exemplo abaixo:

 
<tr>
     <td> Linha 1 Céclula 1</td>
     <td> Linha 1 Céclula 2</td>
     <td> Linha 1 Céclula 3</td>
 </tr>
 <tr>
     <td> Linha 2 Céclula 1</td>
     <td> Linha 2 Céclula 2</td>
     <td> Linha 2 Céclula 3</td>
 </tr>

Continuando no html o devemos encontrar a seguinte código:

<!DOCTYPE>
    <html>
         <head>
             <title> Edutoria</title>
          </head>
 
 <body>
 
     <table>
          <tr>
               <td> Linha 1 Céclula 1</td>
               <td> Linha 1 Céclula 2</td>
               <td> Linha 1 Céclula 3</td>
          </tr>
          <tr>
               <td> Linha 2 Céclula 1</td>
               <td> Linha 2 Céclula 2</td>
               <td> Linha 2 Céclula 3</td> 
         </tr>
         <tr>
               <td> Linha 3 Céclula 1</td>
               <td> Linha 3 Céclula 2</td>
               <td> Linha 3 Céclula 3</td>
         </tr>
      </table>
 
 </body>
 
</html>

Caso você tenha a necessidade de uma borda visível em sua tabela é só acrescentar o atributo border na linha que declara a tabela:

<table border="1">

... Até agora alcançamos uma tabla simples, 3x3 porém necessidades pedem que algumas linhas ou colunas sejam mescladas para chegar em um resultado especifico. com por exemplo criar uma tabela apresentado no vídeo, onde a coluna 1 e 2 na linha 1 se tornam uma só, e na coluna 3 as linhas 1 e 2 mesclam para chegar ao resultado esperado:

capturar

Para mesclarmos duas colunas em uma linha devemos usar a tag Colspan, colocamos ela na linha e coluna inicial e declaramos o número de colunas que ela irá expandir .Para mesclarmos duas linhas em uma coluna devemos usar a tag Rowspan, colocamos ela na linha da coluna que deseja expandir e declaramos o número de linhas que ela irá ocupar como no exemplo abaixo:

 <tr>
       <td colspan="2"> Linha 1 Céclula 1</td>
       <!--<td> Linha 1 Céclula 2</td> -->
       <td rowspan="2"> Linha 1 Céclula 3</td>
 </tr>
 <tr>
       <td> Linha 2 Céclula 1</td>
       <td> Linha 2 Céclula 2</td>
       <!-- <td> Linha 2 Céclula 3</td> -->
 </tr>

O código resultante para a tabela anterior deverá ficar assim:

<!DOCTYPE>
<html>
      <head>
         <title> Edutoria - Tabela HTML </title>
      </head>
 
 <body>
 
     <table border="1">
     <tr>
         <td colspan="2"> Linha 1 Céclula 1</td>
         <!--<td> Linha 1 Céclula 2</td> -->
         <td rowspan="2"> Linha 1 Céclula 3</td>
     </tr>
     <tr>
         <td> Linha 2 Céclula 1</td>
         <td> Linha 2 Céclula 2</td>
         <!-- <td> Linha 2 Céclula 3</td> -->
     </tr>
     <tr>
         <td> Linha 3 Céclula 1</td>
         <td> Linha 3 Céclula 2</td>
         <td> Linha 3 Céclula 3</td>
     </tr>
    </table>
 
 </body>
 
</html>

Simples não? qualquer dúvida deixe nos comentários, não se esqueça de se inscrever no canal Edutoria do YouTube e até uma próxima.


Este post tem 1 comentário.

Uma resposta para “HTML – colspan e rowspan”

  1. sandro disse:

    Parabéns belíssimo áudio e vídeo!!!

Adoraria ler seu comentário aqui!

Responderei assim que possível.

Categorias