Basic CSS properties for style sheets-CSS Tutorial-php.cn

Basic CSS properties for style sheets

王林

Release： 2023-09-02 10:25:01

forward

1260 people have browsed it

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

and its elements -

border
CSS border properties are used to define borders -width, border-style and border- color.
border-collapse
This attribute is used to specify whether

elements should have shared or separate borders.

caption

caption-side property is used to position the table title box vertically.

empty-cells

This property is used to specify the display of empty cells in the table.

table-layout strong>
Defines the algorithm used by the browser to lay out the rows, columns, and cells of a table.

Example

The following example illustrates the style of the table-

Real-time demonstration

<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
   border: thin solid;
   padding: 5px;
   font-style: italic;
}
caption {
   caption-side: bottom;
}
td {
   box-shadow: inset 0 0 6px green;
}
</style>
</head>
<body>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

Copy after login

Output

This This gives the following output -

样式表的基本 CSS 属性

Example

Live Demonstration

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
}
table {
   border: 3px solid black;
}
td {
   border: 3px solid lightgreen;
}
th {
   border: 3px solid lightblue;
}
#t2 {
   border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Team Rankings</h2>
<div>
<table id="t1">
<tr>
<th>Team (Test)</th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>Australia</td>
<td>2</td>
</tr>
</table>    
</div>
<div>
<table id="t2">
<tr>
<th>Team (ODI) </th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>England</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>

Copy after login

Output

This gives the following output -

样式表的基本 CSS 属性

The above is the detailed content of Basic CSS properties for style sheets. For more information, please follow other related articles on the PHP Chinese website!