change the style of table cells

Sat Feb 25, 2012 8:40 pm

In this example we focus on changing the style of table tag cells ( th and td tags ).
Code:
<html>

<
head>
  <title>Control the style of table Cells</title>
   <style type="text/css">
table {
  border-collapse: collapse;
  border: 6px solid #555;
}
td {
  padding: 5px;
}
th {
  color: white;
  background-color: black;
}
td, th+th {
  border: 6px solid #777;
}
td+td {
  border: 6px solid #bbb;
  text-align: center;

}
  </style>
</
head>

<
body>
<
table>
  <caption>Table with  colored background </caption>
  <tr >
    <th>Column 1 header</th>
    <th>Column 2 header</th>
  </tr>
  <tr >
    <td>Row 1 data1</td>
    <td>Row 1 data2</td>
  </tr>
  <tr  >
    <td>Row 2 data1</td>
    <td>Row 2 data2</td>
  </tr>
  <tr >
    <td>Row 3 data1</td>
    <td>Row 3 data2</td>
  </tr>
  <tr >
    <td>Row 4 data1</td>
    <td>Row 4 data2</td>
  </tr>
</
table>

</
body>
</
html>  
 




  Related Posts  to : change the style of table cells
 Change table style using CSS     -  
 different colors for table Even- Odd rows and Cells     -  
 change the style of the kbd     -  
 Change the td font style     -  
 change border style to solid at div tag     -  
 change the font style of the body tag     -  
 Change the border style on mouse over     -  
 Change the default underline style of link     -  

Topic Tags

HTML Table