Css table border and padding

: The Table element

The HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

Try it

Attributes

This element includes the global attributes.

Deprecated attributes

This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:

• left : the table is displayed on the left side of the document;
• center : the table is displayed in the center of the document;
• right : the table is displayed on the right side of the document.

Set margin-left and margin-right to achieve an effect that is similar to the align attribute:

• left : margin-right: auto; margin-left: 0;
• center : margin-right: auto; margin-left: auto;
• right : margin-right: 0; margin-left: auto;

The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed by a ‘ # ‘. One of the predefined color keywords can also be used.

To achieve a similar effect, use the CSS background-color property.

This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the frame attribute is set to void.

To achieve a similar effect, use the CSS border shorthand property.

This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding’s length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell’s content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).

This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.

This enumerated attribute defines which side of the frame surrounding the table must be displayed.

To achieve a similar effect, use the border-style and border-width properties.

This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:

• none , which indicates that no rules will be displayed; it is the default value;
• groups , which will cause the rules to be displayed between row groups (defined by the , and elements) and between column groups (defined by the and elements) only;
• rows , which will cause the rules to be displayed between rows;
• cols , which will cause the rules to be displayed between columns;
• all , which will cause the rules to be displayed between rows and columns.

To achieve a similar effect, apply the border property to the appropriate , , , , or elements.

This attribute defines an alternative text that summarizes the content of the table. Use the element instead.

This attribute defines the width of the table. Use the CSS width property instead.

Examples

Simple table

table> tr> td>Johntd> td>Doetd> tr> tr> td>Janetd> td>Doetd> tr> table> 

Result

Further simple examples

p>Simple table with headerp> table> tr> th>First nameth> th>Last nameth> tr> tr> td>Johntd> td>Doetd> tr> tr> td>Janetd> td>Doetd> tr> table> p>Table with thead, tfoot, and tbodyp> table> thead> tr> th>Header content 1th> th>Header content 2th> tr> thead> tbody> tr> td>Body content 1td> td>Body content 2td> tr> tbody> tfoot> tr> td>Footer content 1td> td>Footer content 2td> tr> tfoot> table> p>Table with colgroupp> table> colgroup span="4">colgroup> tr> th>Countriesth> th>Capitalsth> th>Populationth> th>Languageth> tr> tr> td>USAtd> td>Washington, D.C.td> td>309 milliontd> td>Englishtd> tr> tr> td>Swedentd> td>Stockholmtd> td>9 milliontd> td>Swedishtd> tr> table> p>Table with colgroup and colp> table> colgroup> col style="background-color: #0f0" /> col span="2" /> colgroup> tr> th>Limeth> th>Lemonth> th>Orangeth> tr> tr> td>Greentd> td>Yellowtd> td>Orangetd> tr> table> p>Simple table with captionp> table> caption> Awesome caption caption> tr> td>Awesome datatd> tr> table> 

table  border-collapse: collapse; border-spacing: 0px; > table, th, td  padding: 5px; border: 1px solid black; > 

Result

Table sorting

Sorting table rows

In the below example, you can see such an example. We are attaching it to the element so that it sorts the table cells in order of increasing value, and updates the display to suit.

HTML

table> tbody> tr> td>3td> tr> tr> td>2td> tr> tr> td>1td> tr> tbody> table> 

JavaScript

HTMLTableSectionElement.prototype.sort = function (cb)  Array.from(this.rows) .sort(cb) .forEach((e) => this.appendChild(this.removeChild(e))); >; document .querySelector("table") .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent)); 

Result

Sorting rows with a click on the th element

HTML

table> thead> tr> th>Numbersth> th>Lettersth> tr> thead> tbody> tr> td>3td> td>Atd> tr> tr> td>2td> td>Btd> tr> tr> td>1td> td>Ctd> tr> tbody> table> 

JavaScript

const allTables = document.querySelectorAll("table"); for (const table of allTables)  const tBody = table.tBodies[0]; const rows = Array.from(tBody.rows); const headerCells = table.tHead.rows[0].cells; for (const th of headerCells)  const cellIndex = th.cellIndex; th.addEventListener("click", () =>  rows.sort((tr1, tr2) =>  const tr1Text = tr1.cells[cellIndex].textContent; const tr2Text = tr2.cells[cellIndex].textContent; return tr1Text.localeCompare(tr2Text); >); tBody.append(. rows); >); > > 

Result

Displaying large tables in small spaces

A common issue with tables on the web is that they don’t natively work very well on small screens when the amount of content is large, and the way to make them scrollable isn’t obvious, especially when the markup may come from a CMS and cannot be modified to have a wrapper.

This example provides one way to display tables in small spaces. We’ve hidden the HTML content as it is very large, and there is nothing remarkable about it. The CSS is more useful to inspect in this example.

table> thead> tr> th>1sup>3sup> equals: th>2sup>3sup> equals: th>3sup>3sup> equals: th>4sup>3sup> equals: th>5sup>3sup> equals: th>6sup>3sup> equals: th>7sup>3sup> equals: tbody> tr> td>row 1: 1 td>row 1: 8 td>row 1: 27 td>row 1: 64 td>row 1: 125 td>row 1: 216 td>row 1: 343 tr> td>row 2: 1 td>row 2: 8 td>row 2: 27 td>row 2: 64 td>row 2: 125 td>row 2: 216 td>row 2: 343 tr> td>row 3: 1 td>row 3: 8 td>row 3: 27 td>row 3: 64 td>row 3: 125 td>row 3: 216 td>row 3: 343 tr> td>row 4: 1 td>row 4: 8 td>row 4: 27 td>row 4: 64 td>row 4: 125 td>row 4: 216 td>row 4: 343 tr> td>row 5: 1 td>row 5: 8 td>row 5: 27 td>row 5: 64 td>row 5: 125 td>row 5: 216 td>row 5: 343 tr> td>row 6: 1 td>row 6: 8 td>row 6: 27 td>row 6: 64 td>row 6: 125 td>row 6: 216 td>row 6: 343 tr> td>row 7: 1 td>row 7: 8 td>row 7: 27 td>row 7: 64 td>row 7: 125 td>row 7: 216 td>row 7: 343 tr> td>row 8: 1 td>row 8: 8 td>row 8: 27 td>row 8: 64 td>row 8: 125 td>row 8: 216 td>row 8: 343 tr> td>row 9: 1 td>row 9: 8 td>row 9: 27 td>row 9: 64 td>row 9: 125 td>row 9: 216 td>row 9: 343 tr> td>row 10: 1 td>row 10: 8 td>row 10: 27 td>row 10: 64 td>row 10: 125 td>row 10: 216 td>row 10: 343 tr> td>row 11: 1 td>row 11: 8 td>row 11: 27 td>row 11: 64 td>row 11: 125 td>row 11: 216 td>row 11: 343 tr> td>row 12: 1 td>row 12: 8 td>row 12: 27 td>row 12: 64 td>row 12: 125 td>row 12: 216 td>row 12: 343 tr> td>row 13: 1 td>row 13: 8 td>row 13: 27 td>row 13: 64 td>row 13: 125 td>row 13: 216 td>row 13: 343 tr> td>row 14: 1 td>row 14: 8 td>row 14: 27 td>row 14: 64 td>row 14: 125 td>row 14: 216 td>row 14: 343 tr> td>row 15: 1 td>row 15: 8 td>row 15: 27 td>row 15: 64 td>row 15: 125 td>row 15: 216 td>row 15: 343 tr> td>row 16: 1 td>row 16: 8 td>row 16: 27 td>row 16: 64 td>row 16: 125 td>row 16: 216 td>row 16: 343 tr> td>row 17: 1 td>row 17: 8 td>row 17: 27 td>row 17: 64 td>row 17: 125 td>row 17: 216 td>row 17: 343 tr> td>row 18: 1 td>row 18: 8 td>row 18: 27 td>row 18: 64 td>row 18: 125 td>row 18: 216 td>row 18: 343 tr> td>row 19: 1 td>row 19: 8 td>row 19: 27 td>row 19: 64 td>row 19: 125 td>row 19: 216 td>row 19: 343 tr> td>row 20: 1 td>row 20: 8 td>row 20: 27 td>row 20: 64 td>row 20: 125 td>row 20: 216 td>row 20: 343 table> 

When looking at these styles you’ll notice that table’s display property has been set to block . While this allows scrolling, the table loses some of its integrity, and table cells try to become as small as possible. To mitigate this issue we’ve set white-space to nowrap on the . However, we don’t do this for the to avoid long titles forcing columns to be wider than they need to be to display the data.

To keep the table headers on the page while scrolling down we’ve set position to sticky on the elements. Note that we have not set border-collapse to collapse , as if we do the header cannot be separated correctly from the rest of the table.

table, th, td  border: 1px solid; > table  width: 100%; max-width: 400px; height: 240px; margin: 0 auto; display: block; overflow-x: auto; border-spacing: 0; > tbody  white-space: nowrap; > th, td  padding: 5px 10px; border-top-width: 0; border-left-width: 0; > th  position: sticky; top: 0; background: #fff; vertical-align: bottom; > th:last-child, td:last-child  border-right-width: 0; > tr:last-child td  border-bottom-width: 0; > 

Result

Accessibility concerns

Captions

This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.

Scoping rows and columns

The scope attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified to provide necessary information about the cells related to a header.

Examples

table> caption> Color names and values caption> tbody> tr> th scope="col">Nameth> th scope="col">HEXth> th scope="col">HSLath> th scope="col">RGBath> tr> tr> th scope="row">Tealth> td>code>#51F6F6code>td> td>code>hsl(180 90% 64% / 1)code>td> td>code>rgb(81 246 246 / 1)code>td> tr> tr> th scope="row">Goldenrodth> td>code>#F6BC57code>td> td>code>hsl(38 90% 65% / 1)code>td> td>code>rgba(246 188 87 / 1)code>td> tr> tbody> table> 

Result

Complicated tables

Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the colspan and rowspan attributes.

Ideally, consider alternate ways to present the table’s content, including breaking it apart into a collection of smaller, related tables that don’t have to rely on using the colspan and rowspan attributes. In addition to helping people who use assistive technology understand the table’s content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.

If the table cannot be broken apart, use a combination of the id and headers attributes to programmatically associate each table cell with the header(s) the cell is associated with.

Specifications

Browser compatibility

BCD tables only load in the browser

Источник

CSS Table Style

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

Example

Table Color

The example below specifies the background color and text color of elements:

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник