CSS Table

CSS Table:

• The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.
• The border-spacing specifies the width that should appear between table cells.
• The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption.
• The empty-cells specifies whether the border should be shown if a cell is empty.
• The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.

Property Description
border It sets all the border properties in one declaration
border-collapse It specifies whether or not table borders should be collapsed
border-spacing It specifies the distance between the borders of adjacent cells
caption-side It specifies the placement of a table caption
empty-cells It specifies whether or not to display borders and background on empty cells in a table
table-layout It sets the layout algorithm to be used for a table
Example 1

<!DOCTYPE html>

<html>

<head>

<style>

table { border-collapse: collapse; width: 100%; }

th, td { text-align: left; padding: 8px; }

tr:nth-child(even)

{background-color: #f2f2f2}

th { background-color: #4CAF50; color: white; }

</style>

</head>

<body>

<h2>A Colored Table Header</h2>

<h2>We used the padding Property </h2>

<p>This property adds space between the border and the content in a table.</p>

<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of the content in th or td:</p>

<table>

<tr>

<th>First name</th>

<th>Last name</th>

<th>Amount</th>

</tr>

<tr>

<td>Peter</td>

<td> Swanson </td>

<td>$100</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td> </tr>

<tr>

<td>Joe</td>

<td>Lee</td>

<td>$300</td>

</tr>

<tr>

<td>Thomas</td>

<td>patterson</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

 

Example 2

<!DOCTYPE html>

<html>

<head>

<style>

table { border-collapse: collapse; width: 100%; }

th, td { text-align: left; padding: 9px; }

tr:nth-child(even){background-color: #f2f2f2}

</style>

</head>

<body>

<h2>Striped Table</h2>

<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even/odd number of table rows:</p>

<table>

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Points</th>

</tr>

<tr>

<td>Peter</td>

<td>joy</td>

<td>$200</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$190</td>

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>

<td>$300</td>

</tr>

<tr> <td>Cleveland</td>

<td>Brown</td>

<td>$220</td>

</tr>

</table>

</body>

</html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *