How to Define Table Column Widths Using HTML and CSS?-CSS Tutorial-php.cn

How to Define Table Column Widths Using HTML and CSS?

Patricia Arquette

Release： 2024-10-29 19:19:29

Original

766 people have browsed it

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>

Copy after login

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>

Copy after login

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!