Como faço para colocar meu texto no topo de uma tabela no HTML/CSS?
Estou tentando colocar um label no topo da minha tabela porém ele fica no meio alguém pode me ajudar ?
p2 {
font:Arial, Helvetica, sans-serif;
text-align:left;
top:5px;
font-size:9px;
}<table width="1110" height="50" border="1" class="bordasimples" align="center">
<tr>
<td width="555"><label><p2>1A)Qualidade Tecnica</p2></label></td>
<td width="555"> </td>
</tr>
</table> table.bordasimples {
border-collapse: collapse;
font:Arial, Helvetica, sans-serif;
}
Rodrigo Oliveira
Curtidas 0
Melhor post
Venancio Alves
29/08/2017
Olá Rodrigo, verificou: margin, padding e float, porém se colocar o label antes da tag <td> o texto ficará em cima da tabela, conforme o exemplo abaixo:
<table width="1110" height="50" border="1" class="bordasimples" align="center">
<tr>
<label><p2>1A) Qualidade Tecnica</p2></label>
<td width="555"></td>
<td width="555"> </td>
</tr>
<table width="1110" height="50" border="1" class="bordasimples" align="center">
<tr>
<label><p2>1A) Qualidade Tecnica</p2></label>
<td width="555"></td>
<td width="555"> </td>
</tr>
GOSTEI 1
Mais Respostas
Aparecida Gonçalves
29/08/2017
Olá Rodrigo,
Tudo bem?
Vi que você está utilizando tabela<table> e sugiro que utilize <div>. A div pode fazer o mesmo papel da tabela, como se fosse uma caixa, que segura o conteúdo que você inserir nela... além disso, dá para trabalhar melhor quando o seu conteúdo for aberto em um aparelho celular (conceito de design responsivo - quando o site se adapta aos diferentes tamanhos de telas de dispositivos).
Segue o modelo que criei, baseado no seu código:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Exemplo do uso de Div no lugar de Tabela</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {margin:0;padding:0;list-style:none;}
.textoprincipal{max-width:1110px;width:100%;margin-top:4%;display: block;margin-left: auto;margin-right: auto;text-align:center;}
.tabelageral{max-width:1110px;width:100%;margin-top:1%;display: block;margin-left: auto;margin-right: auto;}
.div01{max-width:551px;width:100%;background-color:red;margin:0 auto;padding:2% 0;text-align:center;float:left;border: 2px solid grey;}
.div02{max-width:551px;width:100%;background-color:blue;margin:0 auto;padding:2% 0;text-align:center;float:left;border: 2px solid grey;}
h2{font:Arial, Helvetica, sans-serif;font-size:1.5em;}
.div01 p, .div02 p{font:Arial, Helvetica, sans-serif;text-align:left;font-size:1em;padding: 3% 1%;}
</style>
</head>
<body>
<div class="textoprincipal"><h1>Texto no topo.</h1></div>
<div class="tabelageral">
<div class="div01">
<h2>Título 01</h2>
<p>A) Parágrafo 01 - Exemplo da Div 01 - Fundo Vermelho</p>
</div>
<div class="div02">
<h2>Título 02</h2>
<p>B) Parágrafo 02 - Exemplo da Div 02 - Fundo Azul</p>
</div>
</div>
</body>
</html>
Espero ter ajudado.
Abraço,
Cida Luna.
Tudo bem?
Vi que você está utilizando tabela<table> e sugiro que utilize <div>. A div pode fazer o mesmo papel da tabela, como se fosse uma caixa, que segura o conteúdo que você inserir nela... além disso, dá para trabalhar melhor quando o seu conteúdo for aberto em um aparelho celular (conceito de design responsivo - quando o site se adapta aos diferentes tamanhos de telas de dispositivos).
Segue o modelo que criei, baseado no seu código:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Exemplo do uso de Div no lugar de Tabela</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {margin:0;padding:0;list-style:none;}
.textoprincipal{max-width:1110px;width:100%;margin-top:4%;display: block;margin-left: auto;margin-right: auto;text-align:center;}
.tabelageral{max-width:1110px;width:100%;margin-top:1%;display: block;margin-left: auto;margin-right: auto;}
.div01{max-width:551px;width:100%;background-color:red;margin:0 auto;padding:2% 0;text-align:center;float:left;border: 2px solid grey;}
.div02{max-width:551px;width:100%;background-color:blue;margin:0 auto;padding:2% 0;text-align:center;float:left;border: 2px solid grey;}
h2{font:Arial, Helvetica, sans-serif;font-size:1.5em;}
.div01 p, .div02 p{font:Arial, Helvetica, sans-serif;text-align:left;font-size:1em;padding: 3% 1%;}
</style>
</head>
<body>
<div class="textoprincipal"><h1>Texto no topo.</h1></div>
<div class="tabelageral">
<div class="div01">
<h2>Título 01</h2>
<p>A) Parágrafo 01 - Exemplo da Div 01 - Fundo Vermelho</p>
</div>
<div class="div02">
<h2>Título 02</h2>
<p>B) Parágrafo 02 - Exemplo da Div 02 - Fundo Azul</p>
</div>
</div>
</body>
</html>
Espero ter ajudado.
Abraço,
Cida Luna.
GOSTEI 0