Tabelas HTML
O objetivo deste artigo é apresentá-lo aos fundamentos das tabelas HTML. Isso inclui como criar uma tabela usando tags HTML, como adicionar dados e formatação e como projetar tabelas eficazes e fáceis de usar.
As tabelas HTML permitem que os criadores de sites organizem os dados em linhas e colunas.
Tabelas HTML são criadas usando a tag <table> , onde as linhas da tabela são criadas por tags <tr> e as células de dados são criadas por tags <td> .
Os elementos sob <td> são alinhados automaticamente à esquerda.
| Company | Contact | Country |
|---|---|---|
| Ankunding PLC | Raynor Christopher | Italy |
| Reichert LLC | Roberts Marisa | USA |
| Schaefer, Sipes and Macejkovic | Anais Kihn | France |
| Schoen Ltd | Briana | China |
| Koss LLC | Marques | Japan |
| Hermann PLC | Coby Wolff | London |
Example:
- HTML Tables:
- Create an HTML Table:
- Add HTML Tables Border:
- HTML Tables – Collapsed Borders:
- HTML Tables – Left-align Headings:
- HTML Table – Add Border Spacing:
- HTML Tables – Add Cell Padding:
- HTML Tables Width and Height:
- HTML Tables – Cell that Spans Many Columns:
- HTML Tables – Cell that Spans Many Rows:
- HTML Table – Add a Caption:
- A Special Style for One Table:
Create an HTML Table
The <table> tag represents a table in an HTML document.
<tr> tags are utilized to characterize each table row.
The header of each table is described by a <th> tag. Several types of table data/cells are represented with the <td> tag.
The text in <th> elements is bold and centered by default, and text in <td> elements is left-aligned and regular by default.
The HTML table looks like this:
Example
Note: Table data is contained in the <td> elements. Text, images, lists, other tables, and other HTML elements can be included in these documents.
Add HTML Tables Border
Use CSS border property to add a border to a table:
Example:
HTML Tables – Collapsed Borders
You can collapse the borders into one by adding the CSS border-collapse property:
Example:
HTML Tables – Left-align Headings
Table headings are bolded and centered by default.
The CSS text-align property can be used to left-align the table headings:
Example:
HTML Table – Add Border Spacing
The border-spacing between cells defines the distance between them.
CSS border-spacing can be used to set the border-spacing for a table:
Example:
HTML Tables – Add Cell Padding
The padding between the border and the cell content describes the space between the two.
Table cells will show without padding if you do not select a padding.
The CSS padding property can be utilized to set padding:
Example:
HTML Tables Width and Height
Using the width and height attributes, you can adjust the width and height of a table. In addition to defining table width and height in pixels, you can specify them as percent of available screen space. See example below:
Example:
HTML Tables – Cell that Spans Many Columns
Utilize the colspan attribute to create a cell span of more than one column:
Example:
HTML Tables – Cell that Spans Many Rows
Utilize the rowspan attribute to create a cell span of more than one row:
Example:
HTML Table – Add a Caption
Captions are added to tables with the <caption> tag:
Please remember to include the <caption> tag right after the <table> tag.
Example:
A Special Style for One Table
Adding an id attribute to a table will let you specify a characteristic style for it:
Example:
You can particularly design only the desired table
Você também pode adicionar mais estilo à tabela, conforme mostrado no exemplo abaixo:
Example:
Etiquetas de Tabela HTML
| Marcação | Visão geral |
|---|---|
| <tabela> | Cria uma tabela. |
| <col> | Os atributos de coluna são definidos para cada coluna dentro de um elemento <colgroup>. |
| <tr> | Em uma tabela, especifica uma linha. |
| <td> | Cria uma célula em uma tabela. |
| <legenda> | Cria uma legenda de tabela. |
| <th> | Fornece uma célula de cabeçalho para uma tabela. |
| <colgroup> | Formata uma ou mais colunas em uma tabela. |
| <thead> | Uma tabela organizada de conteúdo de cabeçalho. |
| <pé> | Cria uma tabela com o conteúdo do rodapé. |
| <corpo> | Cria uma tabela com o conteúdo do corpo nela. |
Observação: Referência de marca HTML lista todas as marcas possíveis.
Resumo do capítulo
- Representar tabelas usando o elemento Html Tables <table> .
- Opere o elemento HTML <tr> para descrever uma linha da tabela.
- Utilize o elemento HTML <td> para definir os dados de uma tabela.
- Os cabeçalhos das tabelas são especificados usando o elemento HTML <th> .
- Use o elemento HTML <caption> para adicionar legendas às tabelas.
- Estabeleça uma borda usando a propriedade border do CSS .
- Para reduzir as bordas das células, use a propriedade border-collapse do CSS .
- Para adicionar preenchimento às células, use a propriedade CSS padding .
- Para alinhamento do texto da célula, use a propriedade CSS text-align .
- Você pode ajustar o espaçamento entre as células usando a propriedade CSS border-spacing .
- Crie um span de várias colunas usando o atributo colspan .
- Faça uma célula abranger muitas linhas usando o atributo rowspan .
- Para identificar exclusivamente uma tabela, use o atributo id .
