Meta tags:
description=Estilize tabelas com CSS usando: cor, border-collapse, largura, altura, alinhamento de texto e padding. Veja exemplos práticos.;

Headings (most frequently used words):

de, tabela, exemplo, com, alinhamento, tabelas, uma, criação, vertical, estilização, da, na, propriedade, align, divisores, horizontais, efeito, hover, listras, zebra, do, conteúdo, dos, elementos, td, css, propriedades, cor, recolher, bordas, largura, altura, texto, padding, horizontal, text, responsivas, tópicos, relacionados, prática, resultado, th, direita, base, responsiva,

Text of the page (most frequently used words):
border (55), text (45), css (40), html (32), color (31), table (29), style (28), tabela (27), align (26), background (24), width (24), collapse (23), para (22), font (20), #padding (19), você (19), tabelas (18), thead (18), title (18), grid (18), com (17), alinhamento (17), tbody (17), uma (17), propriedade (16), aprender (15), 500 (15), body (14), money (14), head (14), left (14), conteúdo (13), child (13), 350 (13), exemplo (13), bottom (13), right (13), column (13), vertical (12), nth (12), texto (11), watson (11), horizontal (10), bordas (10), 150 (10), elementos (10), break (10), 100 (9), overflow (9), height (9), top (9), image (9), animation (9), hover (8), propriedades (8), linhas (8), copiar (8), last (8), pode (8), some (8), position (8), stroke (8), experimente (7), mesmo (7), name (7), first (7), doctype (7), que (7), dos (7), por (7), padrão (7), decoration (7), offset (7), flex (7), todos (6), listras (6), zebra (6), page (6), células (6), mary (6), john (6), holmes (6), sherlock (6), example (6), the (6), document (6), margin (6), type (6), variant (6), w3docs (5), efeito (5), divisores (5), cor (5), estilização (5), auto (5), mais (5), solid (5), alinhado (5), transition (5), line (5), outline (5), radius (5), formatter (5), generator (4), prática (4), exemplos (4), horizontais (4), altura (4), aplicadas (4), linha (4), div (4), criação (4), página (4), contêiner (4), usando (4), seletor (4), espaço (4), mode (4), transform (4), fill (4), size (4), list (4), template (4), row (4), gap (4), rule (4), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), largura (3), célula (3), meio (3), base (3), odd (3), even (3), layout (3), elemento (3), 250 (3), 200 (3), lastname (3), firstname (3), black (3), abaixo (3), direita (3), entre (3), use (3), define (3), seção (3), center (3), são (3), dados (3), branco (3), word (3), wrap (3), spacing (3), range (3), origin (3), justify (3), items (3), before (3), after (3), max (3), letter (3), content (3), columns (3), direction (3), clip (3), box (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), snippets (2), tópicos (2), relacionados (2), responsivas (2), recolher (2), this (2), links (2), quais (2), podem (2), ser (2), estilos (2), alinhar (2), ímpares (2), pares (2), 2d7f88 (2), 6eeccf (2), responsiva (2), larga (2), telas (2), aqui (2), quando (2), rolagem (2), alignment (2), verticalmente (2), definir (2), controlar (2), borda (2), então (2), isso (2), cabeçalhos (2), ambas (2), tamanho (2), pai (2), adjacentes (2), visual (2), cada (2), duas (2), cabeçalho (2), azul (2), vem (2), fundo (2), ver (2), usar (2), heading (2), ffffff (2), cores (2), visibility (2), unicode (2), timing (2), function (2), duration (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), display (2), empty (2), counter (2), count (2), repeat (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, sobre, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, animações, marcação, qual, esses, aplicam, topo, destacar, sob, ponteiro, selecionar, mesclar, separar, responsive, ultrapassar, estreitas, quebrar, tornar, envolva, aplique, esse, for, viewport, exibe, barra, vez, esticar, permanecem, intactas, usuário, simplesmente, rola, lado, points, striped, adicionando, nas, criar, hoverable, cdcdcd, ccc, f5f5f5, tornará, dividers, cccccc, adicionar, aos, criará, 300, ambos, whatson, esquerda, centro, ajuda, nos, das, navegadores, alinham, quiser, substituir, manter, centralizados, colunas, numéricas, pelos, dígitos, próxima, mostra, completo, quanto, ocupa, faz, ela, preencha, seu, escolha, comum, dar, aceitam, pixels, fixo, porcentagens, relativo, note, porcentagem, funciona, tiver, definida, portanto, valores, fixos, confiáveis, 50px, quase, sempre, vai, querer, mescla, única, dando, limpo, semelhante, grade, usado, desta, mantém, separadas, separate, desenha, produz, visível, dupla, controla, preenchimento, todas, internas, herdem, corpo, voltam, preto, listrado, como, nossa, tem, seções, principais, usa, pretas, qualquer, estilo, sua, preferência, vamos, explicar, código, acima, resultado, f4f4f4, 1c87c9, estão, usadas, estilizar, definem, respectivamente, recolhe, além, disso, ajustes, páginas, completas, executáveis, abri, las, ajustar, valor, imediatamente, renderizadas, pelo, navegador, simples, duplas, finas, apertadas, nenhuma, separação, transforma, exibições, legíveis, fáceis, escanear, este, capítulo, apresenta, importantes, espaçamento, termina, padrões, usará, repetidamente, destaque, passar, mouse, pequenas, estilize, veja, práticos, zoom, index, writing, will, change, widows, white, space, user, select, bidi, property, underline, orientation, indent, ink, combine, upright, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, initial, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, block, bleed, attachment, backface, appearance, play, state, iteration, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, fullscreen, focus, enabled, disabled, dir, default, checked, active, seletores, selectors, css3, guia, flexbox, guides, gradientes, nomes, class, sintaxe, uso, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender css css basic introdução ao css uso do css sintaxe css css id e class css text css font css links tabelas css css border css padding css margin nomes de cores css gradientes css css guides guia do flexbox propriedades css3 css selectors seletores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom tabelas css estilize tabelas com css usando cor border collapse largura altura alinhamento de texto e padding veja exemplos práticos as tabelas html renderizadas pelo navegador por padrão são simples bordas duplas finas células apertadas e nenhuma separação visual entre as linhas o css as transforma em exibições de dados legíveis e fáceis de escanear este capítulo apresenta as propriedades mais importantes para tabelas bordas espaçamento alinhamento e estilização de linhas e termina com padrões que você usará repetidamente divisores destaque ao passar o mouse listras zebra e rolagem horizontal em telas pequenas todos os exemplos abaixo são páginas completas e executáveis então você pode abri las ajustar um valor e ver o efeito imediatamente propriedades de estilização de tabelas aqui estão as propriedades css usadas para estilizar uma tabela as propriedades background color e color definem as cores de fundo e do texto respectivamente a propriedade border collapse recolhe as bordas da tabela a propriedade text align define o alinhamento horizontal do texto além disso você pode usar height width e padding para ajustes de layout exemplo de estilização de uma tabela exemplo de estilização de tabelas html doctype html html head title title of the document title style table width 100 border collapse collapse table th td border 1 px solid black thead background color 1c87c9 color ffffff th text align center height 50 px tbody tr nth child odd background ffffff tbody tr nth child even background f4f4f4 style head body table thead tr th heading th th heading th tr thead tbody tr td some text td td some text td tr tr td some text td td some text td tr tr td some text td td some text td tr tr td some text td td some text td tr tbody table body html copiar experimente você mesmo resultado vamos explicar o código acima como você pode ver nossa tabela tem duas seções principais a seção thead para os cabeçalhos e a seção tbody para as linhas de dados a tabela usa bordas pretas aplicadas por meio da propriedade border você pode usar qualquer cor e estilo de borda de sua preferência cor da tabela a linha do cabeçalho thead é azul com texto branco o preenchimento azul vem da propriedade background color e o texto branco vem da propriedade color ambas aplicadas ao seletor thead para que todas as células de cabeçalho internas as herdem as células do corpo voltam ao texto preto padrão da página em fundo branco ou listrado recolher bordas por padrão uma tabela desenha duas bordas entre células adjacentes uma para cada célula o que produz um espaço visível e uma linha dupla a propriedade border collapse controla isso border collapse separate o padrão mantém as bordas de cada célula separadas border collapse collapse mescla as bordas adjacentes em uma única linha dando o visual limpo e semelhante a uma grade usado em todos os exemplos desta página você quase sempre vai querer collapse para tabelas de dados largura e altura da tabela use width no seletor table para controlar quanto espaço horizontal a tabela ocupa width 100 faz com que ela preencha seu contêiner que é a escolha mais comum use height em th ou td para dar às linhas mais espaço ambas aceitam pixels 50px para um tamanho fixo ou porcentagens 100 para um tamanho relativo ao elemento pai note que uma height em porcentagem só funciona se o pai tiver uma altura definida portanto valores fixos são mais confiáveis para linhas alinhamento de texto na tabela a propriedade text align define o alinhamento horizontal do conteúdo das células os navegadores alinham o texto de th ao center e o texto de td à left por padrão então você só define text align quando quiser substituir isso por exemplo text align center em th para manter os cabeçalhos centralizados ou text align right para alinhar colunas numéricas pelos dígitos a próxima seção mostra um exemplo completo padding na tabela para controlar o espaço entre a borda e o conteúdo em uma tabela use a propriedade padding nos elementos td e th padding em tabelas html td th padding 15 px copiar alinhamento horizontal com a propriedade text align com a ajuda da propriedade css text align você pode definir o alinhamento horizontal do conteúdo em th ou td por padrão o conteúdo dos elementos td é alinhado à esquerda e o conteúdo dos elementos th é alinhado ao centro no exemplo abaixo o conteúdo dos elementos th e td é alinhado à direita exemplo de alinhamento do conteúdo dos elementos th e td à direita exemplo de alinhamento do conteúdo dos elementos th e td à direita doctype html html head title title of the document title style table td th border 1 px solid black table border collapse collapse width 100 th td text align right style head body h2 horizontal alignment example h2 table thead tr th firstname th th lastname th th money th tr thead tbody tr td sherlock td td holmes td td 200 td tr tr td john td td watson td td 250 td tr tr td mary td td whatson td td 500 td tr tbody table body html copiar experimente você mesmo alinhamento vertical com a propriedade vertical align usando a propriedade css vertical align você pode definir o alinhamento vertical do conteúdo em th ou td por padrão o conteúdo em ambos os elementos th e td é alinhado verticalmente ao meio no exemplo abaixo o conteúdo dos elementos td é alinhado verticalmente à base exemplo de alinhamento vertical do conteúdo dos elementos td à base doctype html html head style table td th border 1 px solid black table border collapse collapse width 100 td height 50 px vertical align bottom text align right padding right 10 px style head body h2 vertical alignment example h2 table thead tr th firstname th th lastname th th money th tr thead tbody tr td sherlock td td holmes td td 300 td tr tr td john td td watson td td 250 td tr tr td mary td td watson td td 500 td tr tbody table body html copiar experimente você mesmo divisores horizontais ao adicionar a propriedade css border bottom aos elementos td e th você criará divisores horizontais exemplo de criação de divisores horizontais doctype html html head title title of the document title style table border collapse collapse width 100 th td padding 10 px text align left border bottom 1 px solid cccccc style head body h2 horizontal dividers example h2 table thead tr th firstname th th lastname th th money th tr thead tbody tr td sherlock td td holmes td td 200 td tr tr td john td td watson td td 350 td tr tr td mary td td watson td td 500 td tr tbody table body html copiar experimente você mesmo tabelas com efeito hover usando o seletor css hover no elemento tr você tornará a tabela com efeito hover exemplo de criação de uma tabela com efeito hover doctype html html head title title of the document title style table border collapse collapse width 100 tr background color f5f5f5 th td padding 15 px text align left border bottom 1 px solid ccc tr hover background color cdcdcd style head body h2 hoverable table example h2 table thead tr th first name th th last name th th money th tr thead tbody tr td sherlock td td holmes td td 200 td tr tr td john td td watson td td 350 td tr tr td mary td td watson td td 500 td tr tbody table body html copiar experimente você mesmo tabela com listras zebra usando o seletor nth child e adicionando a propriedade css background color nas linhas ímpares ou pares da tabela você pode criar uma tabela com listras zebra exemplo de criação de uma tabela com listras zebra doctype html html head title title of the document title style table border collapse collapse width 100 th td text align left padding 10 px tr nth child even background color 6eeccf tr nth child odd background color 2d7f88 style head body h2 striped table example h2 table thead tr th first name th th last name th th points th tr thead tbody tr td sherlock td td holmes td td 250 td tr tr td john td td watson td td 350 td tr tr td mary td td watson td td 500 td tr tbody table body html copiar experimente você mesmo tabelas responsivas uma tabela larga pode ultrapassar telas estreitas e quebrar o layout da página para tornar uma tabela responsiva envolva a em um elemento contêiner aqui um div e aplique overflow x auto a esse contêiner quando a tabela for mais larga que o viewport o contêiner exibe uma barra de rolagem horizontal em vez de esticar a página as linhas permanecem intactas e o usuário simplesmente rola para o lado exemplo de criação de uma tabela responsiva doctype html html head title title of the document title style div overflow x auto table border collapse collapse width 100 th td text align left padding 8 px 5 px tr nth child even background color 6eeccf tr nth child odd background color 2d7f88 style head body h2 responsive table example h2 div table thead tr th first name th th last name th th money th th money th th money th th money th th money th th money th th money th th money th th money th th money th tr thead tbody tr td sherlock td td holmes td td 150 td td 150 td td 150 td td 150 td td 150 td td 150 td td 150 td td 150 td td 150 td td 150 td tr tr td john td td watson td td 350 td td 350 td td 350 td td 350 td td 350 td td 350 td td 350 td td 350 td td 350 td td 350 td tr tr td mary td td watson td td 500 td td 500 td td 500 td td 500 td td 500 td td 500 td td 500 td td 500 td td 500 td td 500 td tr tbody table div body html copiar experimente você mesmo tópicos relacionados css border collapse mesclar ou separar bordas de células css nth child selecionar linhas ímpares pares para listras zebra css hover destacar a linha sob o ponteiro css vertical align alinhar o conteúdo da célula ao topo ao meio ou à base tabelas html a marcação à qual esses estilos se aplicam prática prática quais propriedades css podem ser aplicadas em tabelas quais propriedades css podem ser aplicadas em tabelas alinhamento de texto alinhamento vertical padding cor animações verificar was this page helpful yes no previous css links next css border on this page propriedades de estilização de tabelas cor da tabela recolher bordas largura e altura da tabela alinhamento de texto na tabela padding na tabela alinhamento horizontal com a propriedade text align alinhamento vertical com a propriedade vertical align divisores horizontais tabelas com efeito hover tabela com listras zebra tabelas responsivas tópicos relacionados prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ...