Menu
Components & UI
CSS Tables
Borders, striping, and alignment for tables.
1Table Design
Collapse borders and add padding.
Example Code
css
table {
width: 100%;
border-collapse: collapse;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
}2Understand it in a real interface
A data table is meant for relationships between rows and columns, not general page layout. Borders, padding, and alternating surfaces can help scanning, but headings and captions supply the meaning. On a narrow screen, preserving the table relationship may require an intentional scroll region.
3Try it yourself
Style a small comparison table with headers and a caption. Make one cell contain a longer description and inspect its wrapping. Narrow the viewport and choose whether to scroll the table or simplify the data, rather than shrinking all text until it is unreadable.
Finished reading?
Mark this topic as complete to track progress.