Table in a DIV tag : Element Selector « Style Basics « HTML / CSS






Table in a DIV tag

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.center {
  text-align: center;
}
.center table {
 width: 50%;
 margin: 0 auto;
 text-align: left;
}
</style>
</head>

<body>

  <h2 id="warning">Lorem ipsum dolor sit amet</h2> 

  <div class="center">
   <table width="50%" border="1" cellpadding="30">
    <tr>
     <td>This is the first cell</td>
     <td>This is the second cell</td>
    </tr>
    <tr>
     <td>This is the third cell, it's under the first cell</td>
     <td>This is the fourth cell, it's under the second cell.</td>
    </tr>
   </table>
  </div>


</body>
</html>

   
  








Related examples in the same category

1.To style all elements in a document with no bottom margin using * {margin-bottom:0;}
2.Tag style selector
3.Selectors choose the element to apply formatting to.These may also be grouped together.
4.h1 and h2 have green text and 22pt font
5.Set style for more than one tags
6.Separate the style
7.Style reuse across tags
8.To style all paragraphs in a document with a bottom margin of 10 pixels using p{margin-bottom:10px;}.
9.Styles are shared between h2 and label elements that appear inside of a form
10.Set style for div, h1 and p together
11.Mix group selector and element selector
12.Group style in different css sections
13.Inheritance In Action