CSS TABLES PAGE 9

CSS TABLES

CSS-TABLES
To specify table borders in CSS, use the border property.
1.border-collapse: It specifies whether the browser should control the appearance of adjacent borders that touch each other or whether each cell should maintain its style.
2.border-spacing:  It specifies the width that should appear between table cells.
3.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.
4.empty-cells: It specifies whether the border should be shown if a cell is empty.
5. table-layout:   It 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.
6.width and height: width and height properties define the width and height of a table.
7.Text-align: It align the text of a table.
8.vertical-align:It aligns the text in vertically with top,bottom and middle.
9.table-padding: It is used to  control the space between the border and content in a table  on td and th elements .
10.background-color:It provides colors background to a table.
Example:22
<html><head>
<style>
table,th,td
{
border:1px solid black;
}
</style></head>
<body>
<table>
<tr>
<th>name</th>
<th>class</th>
</tr>
<tr>
<td>ravi</td>
<td>3</td>
</tr>
<tr>
<td>siva</td>
<td>7</td>
</tr>
</table></body></html>
Example:23
<html><head>
<style>
table,th,td
{ border:1px solid red; }
Table {  width:30%;}
Th {  height:20px;background-color:blue;color:yellow;  }
Td {  text-align:right;padding:15px;  }
</style></head>
<body><table>
<tr> <th>name</th><th>class</th>  </tr>
<tr> <td>ravi</td><td>3</td>   </tr>
<tr>  <td>siva</td><td>7</td> </tr>
</table>
</body></html>