Can I Create a Table Using Only `` and CSS?

How to Create a Table Using Only

Tag and CSS

Using only HTML's

element and CSS, you can create a functional table that is cross-browser compatible.

In the provided HTML snippet, various classes are used to style the elements. For a cross-browser experience, you can adjust the CSS as follows:

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

In the adjusted CSS:

• We've replaced .divTable with .div-table for consistency.
• For cross-browser compatibility, we've removed border-collapse:separate; from .divTable.

This updated CSS ensures that the table will be displayed correctly in all major browsers, including IE7 and below.

The above is the detailed content of Can I Create a Table Using Only `` and CSS?. For more information, please follow other related articles on the PHP Chinese website!