<\/center>\n
<\/p>\n
![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tabelas-css.jpg\")
<\/p>\n
<\/p>\n
Bordas da tabela<\/strong><\/p>\n Para especificar bordas da tabela em CSS, use a O exemplo abaixo especifica uma borda preta para os elementos <\/p>\n <\/p>\n Recolher bordas da tabela<\/strong><\/p>\n A <\/p>\n <\/p>\n <\/p>\n <\/p>\n Largura e altura da tabela<\/strong><\/p>\n A largura e a altura de uma tabela s\u00e3o definidas pelas propriedades O exemplo abaixo define a largura da tabela para 100% e a altura dos Alinhamento horizontal<\/strong><\/p>\n A Por padr\u00e3o, o conte\u00fado dos elementos O exemplo a seguir alinha o texto \u00e0 esquerda em Alinhamento vertical<\/strong><\/p>\n A Por padr\u00e3o, o alinhamento vertical do conte\u00fado em uma tabela \u00e9 intermedi\u00e1rio (para os elementos O exemplo a seguir define o alinhamento vertical do texto na parte inferior dos elementos Table Padding<\/strong><\/p>\n Para controlar o espa\u00e7o entre a borda e o conte\u00fado em uma tabela, use a paddingpropriedade nos elementos <\/p>\n <\/p>\n Divisores horizontais<\/p>\n Passe o mouse<\/strong><\/p>\n <\/p>\n Tabelas listradas<\/strong><\/p>\n <\/p>\n <\/p>\n <\/p>\n Tabela responsiva<\/strong><\/p>\n Uma tabela responsiva exibir\u00e1 uma barra de rolagem horizontal se a tela for muito pequena para exibir o conte\u00fado completo:<\/p>\n <\/p>\nborder<\/code>propriedade<\/p>\n<table><\/code>, <th><\/code> e <td><\/code>:<\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tabelas-css-9.png\")
<\/p>\ntable, th, td {<\/code>
\nborder: 1px solid black;<\/code>
\n}<\/code><\/p>\nborder-collapse<\/code>propriedade define se as bordas da tabela devem ser recolhidas em uma \u00fanica borda:<\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tabelas-css-8.png\")
<\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ntable {\r\n border-collapse: collapse;\r\n}\r\n\r\ntable, td, th {\r\n border: 1px solid black;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Let the borders collapse:<\/h2>\r\n\r\n<table>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <\/tr>\r\n <tr>\r\n <td>Peter<\/td>\r\n <td>Griffin<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Lois<\/td>\r\n <td>Griffin<\/td>\r\n <\/tr>\r\n<\/table>\r\n\r\n<p><b>Note:<\/b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results \r\nin IE8 and earlier versions.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tabelas-css-7.png\")
<\/p>\ntable {\r\n border: 1px solid black;\r\n}<\/pre>\n
<\/center>\nwidth<\/code> e height<\/code>.<\/p>\n<th><\/code> elementos para 50px:<\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tabelas-css-6.png\")
<\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ntable, td, th {\r\n border: 1px solid black;\r\n}\r\n\r\ntable {\r\n border-collapse: collapse;\r\n width: 100%;\r\n}\r\n\r\nth {\r\n height: 50px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>The width and height Properties<\/h2>\r\n<p>Set the width of the table, and the height of the table header row:<\/p>\r\n\r\n<table>\r\n <tr>\r\n <th>Firstname<\/th>\r\n <th>Lastname<\/th>\r\n <th>Savings<\/th>\r\n <\/tr>\r\n <tr>\r\n <td>Peter<\/td>\r\n <td>Griffin<\/td>\r\n <td>$100<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Lois<\/td>\r\n <td>Griffin<\/td>\r\n <td>$150<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Joe<\/td>\r\n <td>Swanson<\/td>\r\n <td>$300<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Cleveland<\/td>\r\n <td>Brown<\/td>\r\n <td>$250<\/td>\r\n <\/tr>\r\n<\/table>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n text-align<\/code>propriedade define o alinhamento horizontal (como esquerda, direita ou centro) do conte\u00fado em <th><\/code> ou <td><\/code>.<\/p>\n<th><\/code> \u00e9 alinhado ao centro e o conte\u00fado dos elementos <td><\/code> \u00e9 alinhado \u00e0 esquerda.<\/p>\n <th><\/code> elementos:<\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tabelas-css-5.png\")
<\/p>\nvertical-align<\/code>propriedade define o alinhamento vertical (como superior, inferior ou central) do conte\u00fado em <th><\/code> ou <td><\/code>.<\/p>\n<th><\/code> e <td><\/code>).<\/p>\n<td><\/code>:<\/p>\n<td><\/code> e <th><\/code>:<\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tabelas-css-3.png\")
<\/p>\nth, td {<\/code>
\npadding: 15px;<\/code>
\ntext-align: left;<\/code>
\n}<\/code><\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tabelas-css-2.png\")
<\/p>\nth, td {<\/code>
\nborder-bottom: 1px solid #ddd;<\/code>
\n}<\/code><\/p>\n
\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tabelas-css-1.png\")
<\/p>\ntr:hover {background-color: #f5f5f5;}<\/code><\/p>\n![\"\"](\"https:\/\/www.joemaster.com.br\/tutoriais\/wp-content\/uploads\/2020\/07\/tabelas-css.png\")
<\/p>\ntr:nth-child(even) {background-color: #f2f2f2;}<\/code><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ntable {\r\n border-collapse: collapse;\r\n width: 100%;\r\n}\r\n\r\nth, td {\r\n text-align: left;\r\n padding: 8px;\r\n}\r\n\r\ntr:nth-child(even) {background-color: #f2f2f2;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Striped Table<\/h2>\r\n<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:<\/p>\r\n\r\n<table>\r\n <tr>\r\n <th>First Name<\/th>\r\n <th>Last Name<\/th>\r\n <th>Points<\/th>\r\n <\/tr>\r\n <tr>\r\n <td>Peter<\/td>\r\n <td>Griffin<\/td>\r\n <td>$100<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Lois<\/td>\r\n <td>Griffin<\/td>\r\n <td>$150<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Joe<\/td>\r\n <td>Swanson<\/td>\r\n <td>$300<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Cleveland<\/td>\r\n <td>Brown<\/td>\r\n <td>$250<\/td>\r\n <\/tr>\r\n<\/table>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\ntable {\r\n border-collapse: collapse;\r\n width: 100%;\r\n}\r\n\r\nth, td {\r\n text-align: left;\r\n padding: 8px;\r\n}\r\n\r\ntr:nth-child(even) {background-color: #f2f2f2;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Responsive Table<\/h2>\r\n<p>A responsive table will display a horizontal scroll bar if the screen is too \r\nsmall to display the full content. Resize the browser window to see the effect:<\/p>\r\n<p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto<\/strong> around the table element:<\/p>\r\n\r\n<div style=\"overflow-x:auto;\">\r\n <table>\r\n <tr>\r\n <th>First Name<\/th>\r\n <th>Last Name<\/th>\r\n <th>Points<\/th>\r\n <th>Points<\/th>\r\n <th>Points<\/th>\r\n <th>Points<\/th>\r\n <th>Points<\/th>\r\n <th>Points<\/th>\r\n <th>Points<\/th>\r\n <th>Points<\/th>\r\n <th>Points<\/th>\r\n <th>Points<\/th>\r\n <\/tr>\r\n <tr>\r\n <td>Jill<\/td>\r\n <td>Smith<\/td>\r\n <td>50<\/td>\r\n <td>50<\/td>\r\n <td>50<\/td>\r\n <td>50<\/td>\r\n <td>50<\/td>\r\n <td>50<\/td>\r\n <td>50<\/td>\r\n <td>50<\/td>\r\n <td>50<\/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 <td>94<\/td>\r\n <td>94<\/td>\r\n <td>94<\/td>\r\n <td>94<\/td>\r\n <td>94<\/td>\r\n <td>94<\/td>\r\n <td>94<\/td>\r\n <td>94<\/td>\r\n <td>94<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Adam<\/td>\r\n <td>Johnson<\/td>\r\n <td>67<\/td>\r\n <td>67<\/td>\r\n <td>67<\/td>\r\n <td>67<\/td>\r\n <td>67<\/td>\r\n <td>67<\/td>\r\n <td>67<\/td>\r\n <td>67<\/td>\r\n <td>67<\/td>\r\n <td>67<\/td>\r\n <\/tr>\r\n <\/table>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<\/center>\n