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

We can use CSS to define the style of the table. The following properties are used to define styles for

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

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

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

Copy after login

Output

This gives the following output −

Styling Tables Working with CSS

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
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
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

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!

source：tutorialspoint.com

Previous article：Difference between resetting and normalizing CSS? Next article：What is the difference between “screen” and “only screen” in media queries?

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