Styling Tables Working with CSS-CSS Tutorial-php.cn

Table of Contents

Example

Output

Home

Web Front-end

CSS Tutorial

Styling Tables Working with CSS

Aug 19, 2023 pm 02:29 PM

We can use CSS to define the style of the table. The following properties are used to define styles for <table> and its elements:

border
The border property of CSS is used to define the border width, border style, and border color.
border-collapse
This attribute is used to specify whether the <table> element should have a shared or independent border.
caption
caption-side property is used to position the table title box vertically.
empty-cells
This property is used to specify how empty cells in the table are displayed.
table-layout is used to define the algorithm used by the browser when laying out the rows, columns, and cells of a table.

Example

The following example demonstrates the style of the table:

Real-time demonstration

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
body {
   font-family: &#39;Bookman Old Style&#39;, serif;
}
th {
   letter-spacing: 1.9px;
}
#one {
   border-right: thick solid blue;
}
td {
   text-align: center;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;Employee List&lt;/h2&gt;
&lt;div&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;th id=&quot;one&quot;&gt;Employee&lt;/th&gt;
&lt;th&gt;Department&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;John &lt;/td&gt;
&lt;td&gt;Marketing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Brad&lt;/td&gt;
&lt;td&gt;Finance&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Tim &lt;/td&gt;
&lt;td&gt;IT&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Steve&lt;/td&gt;
&lt;td&gt;Operations&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Output

This gives the following output −

Styling Tables Working with CSS

Example

Live Demo

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
table {
   float: left;
   empty-cells: hide;
   box-shadow: inset 0 0 4px orange;
}
tr {
   box-shadow: inset 0 0 10px greenyellow;
}
td {
   font-style: italic;
   box-shadow: inset 0 0 8px red;
}
table,td {
   margin: 6px;
   padding: 6px;
   border: 1px solid black;
}
table
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table&gt;
&lt;caption&gt;Demo Table&lt;/caption&gt;
&lt;tr&gt;
&lt;th&gt;Head 1&lt;/th&gt;
&lt;th&gt;Head 2&lt;/th&gt;
&lt;th&gt;Head 3&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;demo&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;demo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;demo&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Output

This gives the following output −

Styling Tables Working with CSS

The above is the detailed content of Styling Tables Working with CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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