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!

css html for using this border table

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn