{"id":408,"date":"2020-06-30T16:03:18","date_gmt":"2020-06-30T19:03:18","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=408"},"modified":"2020-07-01T21:31:53","modified_gmt":"2020-07-02T00:31:53","slug":"tabelas-html","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/tabelas-html\/","title":{"rendered":"Tabelas HTML"},"content":{"rendered":"

As tabelas HTML permitem que os desenvolvedores da Web organizem dados em linhas e colunas.<\/p>\n

Tabela simples<\/p>\n

<table style=\"width:100%\">\r\n  <tr>\r\n    <th>primeiro nome<\/th>\r\n    <th>\u00faltimo nome<\/th>\r\n    <th>idade<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Jill<\/td>\r\n    <td>Smith<\/td>\r\n    <td>50<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Eve<\/td>\r\n    <td>Jackson<\/td>\r\n    <td>94<\/td>\r\n  <\/tr>\r\n<\/table><\/pre>\n


<\/center>\n
 <\/p>\n
Tabela mais completa<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ntable {\r\n  font-family: arial, sans-serif;\r\n  border-collapse: collapse;\r\n  width: 100%;\r\n}\r\n\r\ntd, th {\r\n  border: 1px solid #dddddd;\r\n  text-align: left;\r\n  padding: 8px;\r\n}\r\n\r\ntr:nth-child(even) {\r\n  background-color: #dddddd;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>tabela<\/h2>\r\n\r\n<table>\r\n  <tr>\r\n    <th>empresa<\/th>\r\n    <th>contato<\/th>\r\n    <th>pais<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>joe<\/td>\r\n    <td>manuel<\/td>\r\n    <td>alemanha<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Centro<\/td>\r\n    <td>Francisco<\/td>\r\n    <td>Mexico<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>joana<\/td>\r\n    <td>Rolanda<\/td>\r\n    <td>brasil<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>teste<\/td>\r\n    <td>testeq<\/td>\r\n    <td>usa<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Laugs<\/td>\r\n    <td>Yoss<\/td>\r\n    <td>brasil<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Ms<\/td>\r\n    <td>Gios<\/td>\r\n    <td>br<\/td>\r\n  <\/tr>\r\n<\/table>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Veja abaixo alguns estilos de tabela<\/p>\n
Bordas finas<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ntable, th, td {\r\n  border: 1px solid black;\r\n  border-collapse: collapse;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\u200b\r\n<h2>Bordas<\/h2>\r\n<p>Estilos<\/p>\r\n\u200b\r\n<table style=\"width:100%\">\r\n  <tr>\r\n    <th>primeiro nome<\/th>\r\n    <th>ultimo nome<\/th> \r\n    <th>idade<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Jill<\/td>\r\n    <td>Smith<\/td>\r\n    <td>50<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Eve<\/td>\r\n    <td>Jackson<\/td>\r\n    <td>94<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>John<\/td>\r\n    <td>Doe<\/td>\r\n    <td>80<\/td>\r\n  <\/tr>\r\n<\/table>\r\n\u200b\r\n<\/body>\r\n<\/html>\r\n\u200b\r\n\r\n<\/pre>\n


<\/center>\n
Tabelas com esp\u00e7amento<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ntable, th, td {\r\n  border: 1px solid black;\r\n  border-collapse: collapse;\r\n}\r\nth, td {\r\n  padding: 15px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Novo<\/h2>\r\n<p>Outro exemplo<\/p>\r\n\r\n<table style=\"width:100%\">\r\n  <tr>\r\n    <th>Primeiro nome<\/th>\r\n    <th>\u00faltimo<\/th> \r\n    <th>Idade<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Jill<\/td>\r\n    <td>Smith<\/td>\r\n    <td>50<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Eve<\/td>\r\n    <td>Jackson<\/td>\r\n    <td>94<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>John<\/td>\r\n    <td>Doe<\/td>\r\n    <td>80<\/td>\r\n  <\/tr>\r\n<\/table>\r\n\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Tabelas com mais linhas ou mais colunas em uma s\u00f3:<\/p>\n
<table style=\"width:100%\">\r\n  <tr>\r\n    <th>Name<\/th>\r\n    <th colspan=\"2\">Telephone<\/th>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Bill Gates<\/td>\r\n    <td>55577854<\/td>\r\n    <td>55577855<\/td>\r\n  <\/tr>\r\n<\/table><\/pre>\n


<\/center>\n
 <\/p>\n
<table style=\"width:100%\">\r\n  <tr>\r\n    <th>Name:<\/th>\r\n    <td>Bill Gates<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <th rowspan=\"2\">Telephone:<\/th>\r\n    <td>55577854<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>55577855<\/td>\r\n  <\/tr>\r\n<\/table><\/pre>\n


<\/center>\n
 <\/p>\n
 <\/p>\n
Resumo do cap\u00edtulo<\/strong><\/p>\n
Use o <table><\/code>elemento HTML para definir uma tabela
\nUse o <tr><\/code>elemento HTML para definir uma linha da tabela
\nUse o <td><\/code>elemento HTML para definir os dados da tabela
\nUse o <th><\/code>elemento HTML para definir um cabe\u00e7alho da tabela
\nUse o <caption><\/code>elemento HTML para definir uma legenda da tabela
\nUse a border propriedade CSS para definir uma borda
\nUse a border-collapse propriedade CSS para recolher as bordas das c\u00e9lulas
\nUse a padding propriedade CSS para adicionar preenchimento \u00e0s c\u00e9lulas
\nUse a text-align propriedade CSS para alinhar o texto da c\u00e9lula
\nUse a border-spacing propriedade CSS para definir o espa\u00e7amento entre c\u00e9lulas
\nUse o colspan atributo para fazer uma c\u00e9lula abranger muitas colunas
\nUse o rowspan atributo para fazer uma c\u00e9lula se estender por muitas linhas
\nUse o id atributo para definir exclusivamente uma tabela<\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n