Ir para conteúdo

Aula 3 - Tabelas, linhas e células, legendas

Lordfire

Por Lordfire
em Tutoriais de Websites

 Share

Posts Recomendados

Lordfire

Lordfire 309

Postado
Postado

Confira também as duas primeiras aulas para não ficar perdido: http://www.xtibia.com/forum/topic/205838-aula-2-listas-ordenadas-listas-nao-ordenadas-listas-de-definicao/

 

Nesta terceira aula vou ensinar tabelas.

 

Tabelas

Tabelas são conjuntos de células, divididas em colunas e linhas, e servem para mostrar dados tabulados. Embora muitos ditos "desenvolvedores" usem tabelas pra fazer layouts dos sites, isso NÃO é recomendado e eu vou ensinar isso usando divs e CSS.

 

Tabelas são definidas pela tag <table> e possuem vários elementos internos para organizar. Como exemplo, vamos construir uma tabelinha com os stages de um servidor.

 

Dentro da tag table, nós usamos as tags <tr> (table row) para definir uma linha e, dentro dessa linha, <td> (table data) para definir uma célula. Também podemos usar o atributo "border" para definir a espessura da borda, em pixels, mas em breve vamos mudar isso. Assim:

<table border="1">
   <tr>
    <td>Level mínimo</td>
    <td>Level máximo</td>
    <td>Stage</td>
   </tr>
   <tr>
    <td>~~</td>
    <td>50</td>
    <td>100x</td>
   </tr>
   <tr>
    <td>100</td>
    <td>200</td>
    <td>50x</td>
   </tr>
   <tr>
    <td>200</td>
    <td>~~</td>
    <td>10x</td>
   </tr>
</table>

HtpB6NE.jpg

 

Bem básico né? Mas essa primeira linha não ficou legal... que tal se a gente dividir a tabela em uma linha de cabeçalho? Também é possível! As tabelas podem usar as tags <thead> (table head), <tfoot> (table footer) e <tbody> (table body) (NESTA ORDEM) para separar cabeçalhos, rodapés e corpo da tabela. Dentro do thead, usamos a tag <th> (table header) ao invés de tr para destacar o cabeçalho. Por exemplo:

<table border="1">
   <thead>
    <tr>
	    <td>Level mínimo</td>
	    <td>Level máximo</td>
	    <td>Stage</td>
    </tr>
   </thead>
   <tbody>
    <tr>
	    <td>~~</td>
	    <td>50</td>
	    <td>100x</td>
    </tr>
    <tr>
	    <td>100</td>
	    <td>200</td>
	    <td>50x</td>
    </tr>
    <tr>
	    <td>200</td>
	    <td>~~</td>
	    <td>10x</td>
    </tr>
   </tbody>
</table>

0Y4C3Do.jpg

 

Além disso, nós também podemos usar a tag <caption> para definir a legenda/título de uma tabela! Ao invés de usar um heading fora da tabela, isso facilita nosso trabalho :)

<table border="1">
   <caption>Stages do servidor</caption>
   <thead>
    <tr>
	    <th>Level mínimo</th>
	    <th>Level máximo</th>
	    <th>Stage</th>
    </tr>
   </thead>
   <tbody>
    <tr>
	    <td>~~</td>
	    <td>50</td>
	    <td>100x</td>
    </tr>
    <tr>
	    <td>100</td>
	    <td>200</td>
	    <td>50x</td>
    </tr>
    <tr>
	    <td>200</td>
	    <td>~~</td>
	    <td>10x</td>
    </tr>
   </tbody>
</table>

y5UZ62q.jpg

 

É importante saber usar todos estes elementos na hora de fazer seu site. Embora haja pouca diferença visual, por exemplo, ao colocar o th, na prática isso é bom para ferramentas de pesquisa e é um bom costume.

 

A tarefa da vez vai usar esta aula e a anterior: imagine um servidor fictício, e faça uma página com o título, uma lista com as skill rates e uma tabela com os stages (como nos exemplos acima). Se quiser, use imagens, links e os outros elementos da primeira aula também.

Link para o comentário
Compartilhar em outros sites
Bloxx

Bloxx 15

Postado
Postado (editado) 

<h2>Informações do Servidor</h2></br>
<h4>Server CS2D</h4>
<ul style="list-style-type": disc">
      <li><b>DualisCS Server Oficial, Recuse Imitações </b></li>
      <li>Todo Dia Funcionando</li>
      <li>Sistema de Kick Automatico de camper e anti-speeder</li>
      <li>24hrs Online!</li>
      <li>Detector de Aimbot: se o player vira 180º em menos de 15 milésimos de segundo, ban</li>
      <li>Votekick permitido apenas se houver motivos, caso não haja, o votador levará kick</li>
      <li>Eventos Diarios: TK, Cobra de Fogo, GK</li>
</ul>
</br>
<table border="1">
<caption>Fatores de Dano Principais</caption>
<thead>
   <th>
      <td>AWP</td>
      <td>M4A1</td>
      <td>AK-47</td>
      <td>Aug</td>
      <td>Deagle</td>
  </th>
</thead>
<tbody>
   <tr>
      <td>K.O</td>
      <td>25x</td>
      <td>25x</td>
      <td>68x</td>
      <td>17x</td>
  </tr>
</tbody>
</table>
</br>
<p>Lembrando que as rates podem ser dobradas se modificadas por um membro <b>VipZik</b> do servidor.</p>
</br>
<h5>Algumas Regras Básicas</h5>
<ul style="list-style-type= disc">
    <li>Não fique camper. (Leva Kick)</li>
    <li>Não peça item/cargo/RCon/Vip/Membro/ViPZiK a Staff ou ao Hoster. (Leva Ban USGN)</li>
    <li>Aqui não é hotel pra ficar spec toda hora. (Se não sair em 5 min, ban)</li>
    <li>Não fique <b>lagger</b>, feche todos os seus programas, MSN, Skype e afins. (Senão fechar leva Ban IP + USGN)</li>
    <li>Não somos um clanserv, não peça x1, cf ou tests. (Leva Kick)</li>
    <li>O evento pode acontecer a qualquer hora, não peça eventos ou pedir para refazer um (Leva Ban de Nick)
</ul>
</br>
<h3>Screenshots do Server</h3>
   <img src="scr1.png" alt="Evento TK"/>
   <img src="scr2.png" alt="Evento Cobra de Fogo"/>
   <img src="scr3.png" alt="Alguns TRRs campers, foram kickados"/>
   <img src="scr4.png" alt="Mensagem que apareceu na tela logo após um Rampage"/>
 </br>
<h3>Clans Registrados no Servidor</h3>
<ul style="list-style-type= square">
   <li>Bl@cKW|-|3at</li>
   <li>Wolfs2D</li>
   <li>DREAMERS</li>
   <li>godsTEAM|</li>
   <li>YoW g0t 0w/\/3D!</li>
</ul>
<p>Obrigado por ler o F1.</p>

 

ow será que fiko bom? eu demorei tipo 1 hora pra fazer isso ae, sem falar nos erros de português, q eu ajeitei todos, e fez eu demorar mais ainda, mesmo já tendo acabado, ai depois corrigi os acentos, e finalmente revisei as tags pra ver se tava tudo ok. vejam se ficou bom ae!

 

@EDIT

 

Indentei o código (não sei se está indentado corretamente, pois nunca precisei indentar codigos, até pq já estão muito faceis de identificar.) e troquei os sinais do list-style-type do = para :

 

Abraços. happy.png

Editado por Bloxx
Link para o comentário
Compartilhar em outros sites
pobredobrega

pobredobrega 4

Postado
Postado (editado) 

<h1>Novo ot de pokemon, o PCS</h1>
<h2> Informações basicas</h2>
<ol>  
   <li>Serve será inaugurado em dois dias;</li>
   <li>Serve com pokemon rosas, sprites da pxg, ataques do pxg, quest novas, e golden arena funcionando;</li>
   <li>Serve com up bom, catch bom, e mt mais.</li>
</ol>
<h3>Skill rates</h3>
Bom n sabemos +- a skills mais vai ser bom
<h4>Stages</h4>
<table border="1">
<caption>Stages do servidor PCS</caption>
<tr>
<td>Level minimo</td>
<td>Level maximo</td>
<td>Stages</td>
</tr>
<tr>
<td>1</td>
<td>20</td>
<td>1x</td>
</tr>
<tr>
<td>21</td>
<td>50</td>
<td>1x</td>
</tr>
<tr>
<td>51</td>
<td>~~</td>
<td>1x</td>
</tr>
</table>
<p><b>Imagens do serve</b></p>
<p><img src="http://i.imgur.com/3TXAEYA.jpg" /></p>
<p><img src="http://i.imgur.com/hd2t199.jpg" /></p>
<p><img src="http://i.imgur.com/4S73hDr.jpg" /></p>

<p><b>Gostou do que viu entao curta a nossa pagina no facebook</b></p>
<p><a href="http://www.facebook.com/Caos.Server">Clike e veja a pagina do PCS</a></p>

 

Como ficou

http://www.peuretry.xpg.com.br/

Editado por pobredobrega
Link para o comentário
Compartilhar em outros sites
DiogoTemporario

DiogoTemporario 91

Postado
Postado (editado)

E uma tabela deste tipo, como seria a melhor maneira de se montar?

 

formula_writing_solubility_table.gif

 

Fiz da seguinte forma:

 

http://www.teste442....com.br/aulas/3/

 

<html>
<head>
<title>Teoria Cinética dos Gases</title>
 <meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
</head>
<body>
 <table border="1">
  <caption>Q-W=ΔE</caption>
  <tr><td /><td>Q</td><td>W</td><td>ΔE</td></tr>
  <tr><td>Adiabático</td><td>0</td><td>-ΔE</td><td>-W</td></tr>
  <tr><td>Isotérmico</td><td>ΔE-W</td><td>RnTln(V'/V'')</td><td>0</td></tr>
  <tr><td>Isovolumétrico</td><td>ΔE</td><td>0</td><td>Q</td></tr>
 </table>
</body>
</html>

 

Acho muito melhor trabalhar dessa forma, pois é mais intuitivo representar lado a lado no código as cédulas que ficam lado a lado numa linha. Mas mesmo assim, coisa chata trabalhar com tabelas em html, pqp, deve ter um jeito mais fácil de fazer isso, tipo excel.

 

Fugi um pouco da proposta da tarefa mas foda-se.

 

btw podia passar menos detalhadamente esses conteúdos que são de fácil compreensão pra qualquer um, deixando pra se aprofundar nas partes mais complicadas.

 

Outra sugestão:

 

Poderia explicar o significado da tag em inglês, fica muito mais fácil de decorar. <tr>, por exemplo, é table row, e <td> table data. Da mesma forma na aula 2, ficaria muito mais fácil decorar as tags de listas sabendo que <ul> significa unordered list, e que <li> significa list item.

 

#Dúvidas (não exatamente sobre tabelas):

 

Há problema em usar <h2> para o cabeçário A e <h4> para o cabeçário B?

 

Em:

 

<p>dW = dPdV</p>
 <img src="../img/w.png">
 <p>Quod erat demonstrandum</p>

 

Há necessidade de fechar e abrir o parágrafo? Da mesma forma se ao invés de <img> tivéssemos outra tag, como p.e. <h4>

 

É correto usar, p.e. <dt><p>Texto<br />Texto</p></dt> ?

Editado por DiogoTemporario
Link para o comentário
Compartilhar em outros sites
Lordfire

Lordfire 309

Postado
  • Autor
Postado

@Bloxx

Não esqueça de indentar o código (deixar espaço à esquerda) para facilitar na hora de arrumar depois e tornar o código legível. No geral ficou certo, mas releia a parte sobre style do tutorial de listas, é style="list-style-type: tipo" e você usou símbolo de igual.

 

@pobredobrega

Você esqueceu de fechar a tag ol e de fechar as tags img, todas ficaram sem o /> no final.

 

@Diogo

1) Acho que você quis dizer "cabeçalho". Não, afinal o hx é justamente para isso.

2) Sim, apesar de alguns browsers até interpretarem corretamente se você não fechar os parágrafos, este não é o comportamento previsto pela W3C.

3) Sim, sem problemas.

Pode ler aqui um pouco mais: http://www.w3schools.com/html/html_paragraphs.asp

Link para o comentário
Compartilhar em outros sites
Bloxx

Bloxx 15

Postado
Postado (editado)

ah sim eu botei sinal de igual antes dos disc e dos square, nem percebi que estava errado, e pensei que não precisasse indentar, ja que todo mundo tava fazendo sem indentar, mais ja vou arrumar. ah sim, eu tinha testado o código no meu navegador, e reconheceu a parte do style sem problemas mesmo estando com o sinal de igual ao invés dos dois pontinhos. então não fez a menor diferença mais mesmo assim irei arrumar.

 

Abraços. happy.png

Editado por Bloxx
Link para o comentário
Compartilhar em outros sites
Lordfire

Lordfire 309

Postado
  • Autor
Postado

ah sim eu botei sinal de igual antes dos disc e dos square, nem percebi que estava errado, e pensei que não precisasse indentar, ja que todo mundo tava fazendo sem indentar, mais ja vou arrumar. ah sim, eu tinha testado o código no meu navegador, e reconheceu a parte do style sem problemas mesmo estando com o sinal de igual ao invés dos dois pontinhos. então não fez a menor diferença mais mesmo assim irei arrumar.

 

Abraços. happy.png

O correto é usar dois pontos, mas alguns navegadores fogem da regra sabe-se lá porque :p indentar não é obrigatório, mas é muito melhor.

Link para o comentário
Compartilhar em outros sites
Puricute

Puricute 1

Postado
Postado

htmltabela.png

<html>
<body>
<table border="1">
<caption>xx xx xx xx</caption>
<thead>
		<th>
				<td>xxxx</td>
				<td>xxxx</td>
				<td>xxxx</td>
		</th>
</thead>
<tbody>
		<tr>
				<td>xxx</td>
				<td>xxx</td>
				<td>xxx</td>
		</tr>
		<tr>
				<td>xxx</td>
				<td>xxx</td>
				<td>xxx</td>
		</tr>
		<tr>
				<td>xxx</td>
				<td>xxx</td>
				<td>xxx</td>
		</tr>
</tbody>
</table>
</body>
</html>

Link para o comentário
Compartilhar em outros sites
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...