Set border for table cell in HTML and CSS

Description

The following code shows how to set border for table cell.

Example


<!--from w w  w .j  a  v  a 2s . c  om-->
<!DOCTYPE html>
<html>
<head>
<style>

.myTable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.myTable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.myTable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
</style>
</head>
<body>
<table class="myTable">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Height</th>
<th>Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>C</td>
<td>6'11"</td>
<td>2014</td>
<td>$4</td>
</tr>
<tr>
<td>B</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$123,123</td>
</tr>
<tr>
<td>C</td>
<td>SG</td>
<td>6'5"</td>
<td>2013</td>
<td>$2,123,960</td>
</tr>
<tr>
<td>D</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1023</td>
<td>$7,123,123</td>
</tr>
<tr>
<td>E</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-2014</td>
<td>$3,001,123</td>
</tr>
</tbody>
</table>
</body>
</html>

Click to view the demo

The code above generates the following result.

Set border for table cell in HTML and CSS

Home »
  HTML CSS Tutorial »
    Table »
      Table Style

...
Add style for even/odd table row in HTML an...
Add style to row hover event in CSS in HTML...
Add style to table header in HTML and CSS
Assign different style to odd and even row ...
Compare separate and collapse table border ...
Create table with round corner in HTML and ...
Highlight both column and row on hover in C...
Highlight one row in table in HTML and CSS
Hight column with column hover CSS in HTML ...
Make the first table column sticky with CSS...
Mix Auto-layout Table with Flex Columns in ...
Mix Column percentage and pixels width sett...
Mix Fixed Table with Flex Columns in HTML a...
Set Padding for table cell in HTML and CSS
Set background color for table header in HT...
Set background for column group in HTML and...
Set border bottom for table cell in HTML an...
Set border collapse for table in HTML and C...

Set border for table cell in HTML and CSS

Set border for table header in HTML and CSS
Set border for table in HTML and CSS
Set border left for table cell in HTML and ...
Set border right for table cell in HTML and...
Set border space for table in HTML and CSS
Set border-spacing for table in HTML and CS...
Set border top for table cell in HTML and C...
Set color for table cell in HTML and CSS
Set color for table header in HTML and CSS
Set font for table in HTML and CSS
Set font size for column group in HTML and ...
Set padding for table header in HTML and CS...
Set style for right bottom cell in HTML and...
Set style for top right table cell in HTML ...
Set style per table column in HTML and CSS
Set table border collapse to separate in HT...
Set table caption to bottom in HTML and CSS
Set table-layout to auto in HTML and CSS
Set table layout to fix and 100% width in H...
...