To beautify web tables, first use borders and spacing to improve clarity, merge borders through border-collapse, set unified padding and light gray borders; secondly add hover effect to enhance interactive experience, use tr:hover to change background color; then distinguish the table header and content, set background color and left alignment for th; finally let the table be displayed on a small screen friendly, and add horizontal scroll bars to achieve responsive layout through the div container.

Tables are common in web design, but the default table styles tend to appear monotonous or even ugly. Simply beautify it with CSS, which will make the table look clearer and more professional, and enhance the visual experience of the overall page.

Use borders and spacing to make the table clearer

The default border of the table may not be obvious, or simply not. It is recommended to add a thin border to the table and set the spacing between cells.

 table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
}

• border-collapse: collapse; Can merge cell borders to avoid double-line borders.
• Setting a unified padding value can make the content and the border feel breathing.
• The border color should not be too dark, and light gray (such as #ddd ) is gentle, so it will not make the table look too depressing.

Add hover effect to improve interactive experience

When users browse tables, if there are too many rows, it is easy to read the wrong rows. Adding a simple hover effect can improve readability.

 tr:hover {
  background-color: #f5f5f5;
}

• This effect is suitable for tables with a lot of data and can make the currently viewed rows more prominent.
• Do not choose the background color that is too bright or too dark, light gray or light blue gray.
• No complex animation is needed, simple color change is enough.

Differentiate between the header and the content to enhance the sense of hierarchy

Table headers are usually the key to understanding the table structure. Appropriate emphasis on table headers can help users find information faster.

 th {
  background-color: #f0f0f0;
  text-align: left;
}

• The alignment of the background color and text of the table header should be different from that of ordinary cells.
• If the table has more horizontal content, left alignment is easier to read than centered.
• You can consider bold fonts, but be careful not to conflict with the text.

Make the form friendly on the small screen

If the web page is responsive, don't forget to consider the display of the form on your phone. Long tables are easily compressed on small screens, affecting reading.

A simple way is:

• Add a horizontal scroll bar to the table container:

 <div style="overflow-x:auto;">
  <table>...</table>
</div>

• This way, even if the table width is too long, it can be viewed by sliding left and right.
• Avoid forced scaling to cause too small text and maintain reading comfort.

Basically that's it. The style optimization of tables does not need to be too complicated. The key is to make adjustments to the details to make the content easier to read and the interface more beautiful.

The above is the detailed content of Styling tables using css for better presentation. For more information, please follow other related articles on the PHP Chinese website!