Tuesday, 3 October 2017

Displaying Border around Cells

The border-collapse property specifies how a border is displayed around a table. Now Here We create a Webpage named is tablecollapse.html to set the style of the borders of table cells.

<!doctype html>
<head>
<title>Table Border Collapse</title>
<style type="text/css">
.collapse{
border-collapse:collapse;
}
.separate{
border-collapse:separate;
}
</style>
</head>
<body>
<h1>Here We show working with border-collapse property</h1>
<p>The border-collapse property value is collapse</p>
<table class="collapse" style="border:1px solid green;">
<tr>
<th>S. No.</th>
<th>E-Name</th>
<th>E-age</th>
</tr>
<tr>
<td>01</td>
<td>kumar</td>
<td>35</td>
</tr>
<tr>
<td>02</td>
<td>sharma</td>
<td>36</td>
</tr>
</table>
<br>
<br>
<p>The border-collapse property value is separate</p>
<table class="separate" style="border:1px solid green;">
<tr>
<th>S. No.</th>
<th>E-Name</th>
<th>E-age</th>
</tr>
<tr>
<td>01</td>
<td>kumar</td>
<td>35</td>
</tr>
<tr>
<td>02</td>
<td>sharma</td>
<td>36</td>
</tr>
</table>
</body>
</html>
The border-collapse property has the value collapse, which sets a common border to all the cells of a table.



No comments:

Post a Comment