BORDAS DA TABELA HTML5
Border é
para adicionar borda nos elementos table,th,td
<!DOCTYPE
html>
<html>
<head>
<titele> Título da página </title>
<style>
table, th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Tabela
com borda</h2>
<p>
Use ccs para colocar borda na tabela. </p>
<table
style="width:100%">
<tr>
<th>Nome</th>
<th>Sobre nome</th>
<th>idade</th>
</tr>
<tr>
<td>maria</td>
<td>Teixeira</td>
<td>25</td>
</tr>
<tr>
<td>Eva</td>
<td>Joana</td>
<td>70</td>
</tr>
<tr>
<td>José</td>
<td>Maria</td>
<td>40</td>
</tr>
</table>
</body>
</html>
BORDA COMO UMA LINHA
Use border- collapse
como colapse
<!DOCTYPE
html>
<html>
<head>
<titele> Título da página </title>
<style>
table, th,
td {
border: 1px solid black;
border-collapse:
collapse;
}
</style>
</head>
<body>
<h2>Tabela
com borda</h2>
<p>
Use ccs para colocar borda na tabela. </p>
<table
style="width:100%">
<tr>
<th>Nome</th>
<th>Sobre nome</th>
<th>idade</th>
</tr>
<tr>
<td>maria</td>
<td>Teixeira</td>
<td>25</td>
</tr>
<tr>
<td>Eva</td>
<td>Joana</td>
<td>70</td>
</tr>
<tr>
<td>José</td>
<td>Maria</td>
<td>40</td>
</tr>
</table>
</body>
</html>
BORDA COM COR NO FUNDO
Se você
colocar cor do fundo branco a borda fica invisível.
<!DOCTYPE
html>
<html>
<head>
<titele> Título da página </title>
<style>
table, th,
td {
border: 1px solid black;
border-collapse:
collapse;
}
th, td {
background-color:red;
}
</style>
</head>
<body>
<h2>Tabela
com borda</h2>
<p>
Use ccs para colocar borda na tabela. </p>
<table
style="width:100%">
<tr>
<th>Nome</th>
<th>Sobre nome</th>
<th>idade</th>
</tr>
<tr>
<td>maria</td>
<td>Teixeira</td>
<td>25</td>
</tr>
<tr>
<td>Eva</td>
<td>Joana</td>
<td>70</td>
</tr>
<tr>
<td>José</td>
<td>Maria</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Bordas da mesa redonda
border-radius as células ficam redonda.
<!DOCTYPE
html>
<html>
<head>
<titele> Título da página </title>
<style>
table, th,
td {
border: 1px solid black;
border-radius: 9px;
}
</style>
</head>
<body>
<h2>Tabela
com borda</h2>
<p>
Use ccs para colocar borda na tabela. </p>
<table
style="width:100%">
<tr>
<th>Nome</th>
<th>Sobre nome</th>
<th>idade</th>
</tr>
<tr>
<td>maria</td>
<td>Teixeira</td>
<td>25</td>
</tr>
<tr>
<td>Eva</td>
<td>Joana</td>
<td>70</td>
</tr>
<tr>
<td>José</td>
<td>Maria</td>
<td>40</td>
</tr>
</table>
</body>
</html>
BORDA
REDONDA SEM MESA
<!DOCTYPE
html>
<html>
<head>
<titele> Título da página </title>
<style>
th, td {
border: 1px solid black;
border-radius: 9px;
}
</style>
</head>
<body>
<h2>Tabela
com borda</h2>
<p>
Use ccs para colocar borda na tabela. </p>
<table
style="width:100%">
<tr>
<th>Nome</th>
<th>Sobre nome</th>
<th>idade</th>
</tr>
<tr>
<td>maria</td>
<td>Teixeira</td>
<td>25</td>
</tr>
<tr>
<td>Eva</td>
<td>Joana</td>
<td>70</td>
</tr>
<tr>
<td>José</td>
<td>Maria</td>
<td>40</td>
</tr>
</table>
</body>
</html>
BORDAS
DA MESA PONTILHADA.
Border-style:dotted
Valores que são permitidos.
·
dotted
·
dashed
·
solid
·
double
·
groove
·
ridge
·
inset
·
outset
·
none
·
hidden
·
·
<!DOCTYPE
html>
·
<html>
·
<head>
<titele> Título da página </title>
·
<style>
·
th, td {
·
border-style: dotted;
·
</style>
·
</head>
·
<body>
·
<h2>Tabela
com borda</h2>
·
<p>
Use ccs para colocar borda na tabela. </p>
·
<table
style="width:100%">
·
<tr>
·
<th>Nome</th>
·
<th>Sobre nome</th>
·
<th>idade</th>
·
</tr>
·
<tr>
·
<td>maria</td>
·
<td>Teixeira</td>
·
<td>25</td>
·
</tr>
·
<tr>
·
<td>Eva</td>
·
<td>Joana</td>
·
<td>70</td>
·
</tr>
·
<tr>
·
<td>José</td>
·
<td>Maria</td>
·
<td>40</td>
·
</tr>
·
</table>
·
</body>
</html>
COR
DA BORDA
BORDER-COLOR DEFINE COR DA BORDA.
<!DOCTYPE
html>
<html>
<head>
<titele> Título da página </title>
<style>
th, td {
border-style:solid;
border-color: #96D4D4;
}
</style>
</head>
<body>
<h2>Tabela
com borda</h2>
<p>
Use ccs para colocar borda na tabela. </p>
<table
style="width:100%">
<tr>
<th>Nome</th>
<th>Sobre nome</th>
<th>idade</th>
</tr>
<tr>
<td>maria</td>
<td>Teixeira</td>
<td>25</td>
</tr>
<tr>
<td>Eva</td>
<td>Joana</td>
<td>70</td>
</tr>
<tr>
<td>José</td>
<td>Maria</td>
<td>40</td>
</tr>
</table>
</body>
</html>