How to Define Table Column Widths Using HTML and CSS?

Defining Table Column Width in HTML and CSS

To set the column widths in the provided table:

CSS width Property:

Utilize the width property within CSS to define the width of each table column. You can specify values in pixels (px) or as a percentage (%) of the parent element's width.

Example:

<code class="css">table {
  width: 100%;  /* Table takes up 100% page width */
}

colgroup {
  display: inline-block;
  width: 100%;
}

col {
  /* Set column widths as a percentage of the parent column group */
  width: 15%;
  width: 70%;
  width: 15%;
}

/* Additional styling for visual demonstration */

td {
  background-color: #aaa;
}

td:nth-child(1), td:nth-child(3) {
  background-color: #777;
}</code>

HTML Markup:

<code class="html"><table style="width: 100%;">
  <colgroup>
    <col span="1" style="width: 15%;">
    <col span="1" style="width: 70%;">
    <col span="1" style="width: 15%;">
  </colgroup>
  <!-- Insert table headers, body, and rows here -->
</table></code>

This solution assigns widths of 15%, 70%, and 15% to the "From", "Subject", and "Date" columns, respectively. Additionally, it ensures that the table extends across the entire page width.

The above is the detailed content of How to Define Table Column Widths Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!