Docstoc

CSS Tables

Document Sample
CSS Tables Powered By Docstoc
					CSS Tables

<html>                                               <body>
<head>                                               <div id=outer >
<link rel=stylesheet type=text/css href=mycss.css>   <h1>Welcome</h1>
<style type=text/css>                                <div id=inner1 align=center>
table.alerts                                         <p> a paragraph inside of a div</p>
{ text-align: center;                                </div>
font-family: Verdana;                                <div id=inner2>
font-weight: normal;                                 <p> another paragraph inside</p>
font-size: 11px;                                     </div>
color: #404040;                                      <blockquote
width: 260px;                                        cite="http://www.petermoore.net/sftb/chapter1.htm">
background-color: #fafafa;                           <p>
border: 1px #d79900 solid;                           Once upon a time there was an IT guy.
border-collapse: collapse;                           </p>
border-spacing: 0px;}                                </blockquote>
                                                     <p style=color:red;font-weight:bold;>moosie</p>
.alertHd                                             <p>Moosie 2</p>
{ border-bottom: 2px solid #d79900;                  <table summary="Standard alerts box"
background-color: #fff2ba;                           class="alerts" cellspacing="0">
text-align: center;                                  <tr>
font-family: Verdana;                                <td class="alertHd">Alerts Box Template</td>
font-weight: bold;                                   </tr>
font-size: 11px;                                     <tr>
color: #404040;}                                     <td class="alertBod">
                                                     <p>
.alertBod p                                          <span class="rightDate">Friday,
{ text-align: left;                                  05.31.2002</span>
font-family: Verdana, sans-serif, Arial;             <br />
font-weight: normal;                                 · <a href="#">A nice indented headline</a>
font-size: 11px;                                     <br />
line-height: 12px;                                   · <a href="#">The little dot instead of a bullet goes
color: #404040;                                      like this: &middot;</a>
background-color: #fafafa;                           </p>
text-indent: -8px;                                   <p>
margin-left: 10px;                                   </div>
margin-right: 10px;                                  </body></html>
margin-top: 5px;
margin-bottom: 5px;}                              table{            border-collapse:collapse;}
                                                  table,th, td{     border: 1px solid black;}
</style>                                          p {font-weight: bold; color:green; }
</head>                                           h1 {color: gold;}
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
#hor-minimalist-a                            <html><head>
{        font-family: "Lucida Sans Unicode", <style type=text/css>xyz</style>
"Lucida Grande",                             </head><body>
Sans-Serif;                                  Below is the table:
         font-size: 12px;                    <p>
         background: #fff;                   <table id="hor-minimalist-a" summary="Employee Pay
         margin: 45px;                       Sheet">
         width: 480px;                       <thead><tr>
         border-collapse: collapse;          <th scope="col">Employee</th>
         text-align: left;                   <th scope="col">Salary</th>
}                                            <th scope="col">Bonus</th>
#hor-minimalist-a th                         <th scope="col">Supervisor</th>
{        font-size: 14px;                    </tr></thead>
         font-weight: normal;                <tbody><tr>
         color: #039;                        <td>Stephen C. Cox</td><td>$300</td><td>$50</td>
         padding: 10px 8px;                  <td>Bob</td></tr>
         border-bottom: 2px solid #6678b1;   <tr><td>Josephin Tan</td><td>$150</td><td>-/td>
}                                            <td>Annie</td>
#hor-minimalist-a td                          </tr><tr>
{      color: #669;                           <td>Joyce Ming</td><td>$200</td><td>$35</td>
       padding: 9px 8px 0px 8px;              <td>Andy</td>
}                                             </tr><tr>
#hor-minimalist-a tbody tr:hover td           <td>James A. Pentel</td><td>$175</td><td>
{      color: #009;}                          $25</td>
                                              <td>Annie</td>
                                              </tr></tbody>
                                              </table>
                                              Above is the table
                                              </body></html>
#ver-minimalist                               #hor-minimalist-b
{       font-family: "Lucida Sans Unicode",   {        font-family: "Lucida Sans Unicode", "Lucida
"Lucida Grande", Sans-Serif;                  Grande", Sans-Serif;
        font-size: 12px;                               font-size: 12px;
        margin: 45px;                                  background: #fff;
        width: 480px;                                  margin: 45px;
        text-align: left;                              width: 480px;
        border-collapse: collapse;                     border-collapse: collapse;
}                                                      text-align: left;
#ver-minimalist th                            }
{       padding: 8px 2px;                     #hor-minimalist-b th
        font-weight: normal;                  {        font-size: 14px;
        font-size: 14px;                               font-weight: normal;
        border-bottom: 2px solid #6678b1;              color: #039;
        border-right: 30px solid #fff;                 padding: 10px 8px;
        border-left: 30px solid #fff;                  border-bottom: 2px solid #6678b1;
        color: #039;                          }
}                                             #hor-minimalist-b td
#ver-minimalist td                            {        border-bottom: 1px solid #ccc;
{       padding: 12px 2px 0px 2px;                     color: #669;
        border-right: 30px solid #fff;                 padding: 6px 8px;
        border-left: 30px solid #fff;         }
        color: #669;                          #hor-minimalist-b tbody tr:hover td
}                                             {        color: #009;}

#box-table-a
{       font-family: "Lucida Sans Unicode",   #background-image
"Lucida Grande", Sans-Serif;                  {      font-family: "Lucida Sans Unicode", "Lucida
        font-size: 12px;                      Grande", Sans-Serif;
        margin: 45px;                                font-size: 12px;
        width: 480px;                                margin: 45px;
        text-align: left;                            width: 480px;
        border-collapse: collapse;                   text-align: left;
}                                                    border-collapse: collapse;
#box-table-a th                                      background: url('table-images/blurry.jpg') 330px
{       font-size: 13px;                      59px no-repeat;
        font-weight: normal;                  }
        padding: 8px;                         #background-image th
        background: #b9c9fe;                  {      padding: 12px;
        border-top: 4px solid #aabcfe;               font-weight: normal;
        border-bottom: 1px solid #fff;               font-size: 14px;
        color: #039;                                 color: #339;
}                                             }
#box-table-a td                               #background-image td
{       padding: 8px;                         {      padding: 9px 12px;
        background: #e8edff;                         color: #669;
        border-bottom: 1px solid #fff;               border-top: 1px solid #fff;
        color: #669;                          }
        border-top: 1px solid transparent;    #background-image tfoot td
}                                             {      font-size: 11px;
#box-table-a tr:hover td                      }
{       background: #d0dafd;                  #background-image tbody td
        color: #339;                          {       background: url('table-images/back.png');
}                                             }
                                              * html #background-image tbody td

#box-table-b                                  #background-image tbody tr:hover td
{       font-family: "Lucida Sans Unicode",   {      color: #339;
"Lucida Grande", Sans-Serif;                         background: none;
        font-size: 12px;                      }
        margin: 45px;
        width: 480px;
        text-align: center;
        border-collapse: collapse;
        border-top: 7px solid #9baff1;
        border-bottom: 7px solid #9baff1;
}
#box-table-b th
{       font-size: 13px;
        font-weight: normal;
        padding: 8px;
        background: #e8edff;
        border-right: 1px solid #9baff1;
        border-left: 1px solid #9baff1;
        color: #039;
}
#box-table-b td
{       padding: 8px;
        background: #e8edff;
        border-right: 1px solid #aabcfe;
        border-left: 1px solid #aabcfe;
        color: #669;
}

#hor-zebra                                    #ver-zebra th
{       font-family: "Lucida Sans Unicode",   {        font-size: 14px;
"Lucida Grande", Sans-Serif;                           font-weight: normal;
        font-size: 12px;                               padding: 12px 15px;
        margin: 45px;                                  border-right: 1px solid #fff;
        width: 480px;                                  border-left: 1px solid #fff;
        text-align: left;                              color: #039;
        border-collapse: collapse;}           }
#hor-zebra th                                 #ver-zebra td
{       font-size: 14px;                      {        padding: 8px 15px;
        font-weight: normal;                           border-right: 1px solid #fff;
        padding: 10px 8px;                             border-left: 1px solid #fff;
        color: #039;}                                  color: #669;
#hor-zebra td                                 }
{       padding: 8px;                         .vzebra-odd
        color: #669;}                         {        background: #eff2ff;
#hor-zebra .odd                               }
{       background: #e8edff; }                .vzebra-even
#ver-zebra                                    {        background: #e8edff;
{       font-family: "Lucida Sans Unicode",   }
"Lucida Grande", Sans-Serif;                  #ver-zebra #vzebra-adventure, #ver-zebra #vzebra-
        font-size: 12px;                      children
        margin: 45px;                         {        background: #d0dafd;
        width: 480px;                                  border-bottom: 1px solid #c8d4fd;
        text-align: left;                     }
        border-collapse: collapse;}           #ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action
                                              {        background: #dce4ff;
                                                       border-bottom: 1px solid #d6dfff;}
#one-column-emphasis                             #newspaper-a
{        font-family: "Lucida Sans Unicode",     {      font-family: "Lucida Sans Unicode", "Lucida
"Lucida Grande", Sans-Serif;                     Grande", Sans-Serif;
         font-size: 12px;                               font-size: 12px;
         margin: 45px;                                  margin: 45px;
         width: 480px;                                  width: 480px;
         text-align: left;                              text-align: left;
         border-collapse: collapse;                     border-collapse: collapse;
}                                                       border: 1px solid #69c;
#one-column-emphasis th                          }
{        font-size: 14px;                        #newspaper-a th
         font-weight: normal;                    {      padding: 12px 17px 12px 17px;
         padding: 12px 15px;                            font-weight: normal;
         color: #039;                                   font-size: 14px;
}                                                       color: #039;
#one-column-emphasis td                                 border-bottom: 1px dashed #69c;
{        padding: 10px 15px;                     }
         color: #669;                            #newspaper-a td
         border-top: 1px solid #e8edff;          {      padding: 7px 17px 7px 17px;
}                                                       color: #669;
.oce-first                                       }
{        background: #d0dafd;                    #newspaper-a tbody tr:hover td
         border-right: 10px solid transparent;   {      color: #339;
         border-left: 10px solid transparent;           background: #d0dafd;
}                                                }
#one-column-emphasis tr:hover td
{        color: #339;
         background: #eff2ff;
}

#newspaper-b                                     #newspaper-c
{       font-family: "Lucida Sans Unicode",      {      font-family: "Lucida Sans Unicode", "Lucida
"Lucida Grande", Sans-Serif;                     Grande", Sans-Serif;
        font-size: 12px;                                font-size: 12px;
        margin: 45px;                                   margin: 45px;
        width: 480px;                                   width: 480px;
        text-align: left;                               text-align: left;
        border-collapse: collapse;                      border-collapse: collapse;
        border: 1px solid #69c;                         border: 1px solid #6cf;
}                                                }
#newspaper-b th                                  #newspaper-c th
{       padding: 15px 10px 10px 10px;            {      padding: 20px;
        font-weight: normal;                            font-weight: normal;
        font-size: 14px;                                font-size: 13px;
        color: #039;                                    color: #039;
}                                                       text-transform: uppercase;
#newspaper-b tbody                                      border-right: 1px solid #0865c2;
{       background: #e8edff;                            border-top: 1px solid #0865c2;
}                                                       border-left: 1px solid #0865c2;
#newspaper-b td                                         border-bottom: 1px solid #fff;
{       padding: 10px;                           }
        color: #669;                             #newspaper-c td
        border-top: 1px dashed #fff;             {      padding: 10px 20px;
}                                                       color: #669;
#newspaper-b tbody tr:hover td                          border-right: 1px dashed #6cf;
{       color: #339;                             }
        background: #d0dafd;
}
#rounded-corner                                  #gradient-style
{       font-family: "Lucida Sans Unicode",      {      font-family: "Lucida Sans Unicode", "Lucida
"Lucida Grande", Sans-Serif;                     Grande", Sans-Serif;
        font-size: 12px;                                font-size: 12px;
        margin: 45px;                                   margin: 45px;
        width: 480px;                                   width: 480px;
        text-align: left;                               text-align: left;
        border-collapse: collapse;                      border-collapse: collapse;
}                                                }
#rounded-corner thead th.rounded-company         #gradient-style th
{       background: #b9c9fe url('table-          {      font-size: 13px;
images/left.png') left -1px no-repeat;                  font-weight: normal;
}                                                       padding: 8px;
#rounded-corner thead th.rounded-q4                     background: #b9c9fe url('table-
{       background: #b9c9fe url('table-          images/gradhead.png') repeat-x;
images/right.png') right -1px no-repeat;                border-top: 2px solid #d3ddff;
}                                                       border-bottom: 1px solid #fff;
#rounded-corner th                                      color: #039;
{       padding: 8px;                            }
        font-weight: normal;                     #gradient-style td
        font-size: 13px;                         {      padding: 8px;
        color: #039;                                    border-bottom: 1px solid #fff;
        background: #b9c9fe;                            color: #669;
}                                                       border-top: 1px solid #fff;
#rounded-corner td                                      background: #e8edff url('table-
{       padding: 8px;                            images/gradback.png') repeat-x;
        background: #e8edff;                     }
        border-top: 1px solid #fff;              #gradient-style tfoot tr td
        color: #669;                             {      background: #e8edff;
}                                                       font-size: 12px;
#rounded-corner tfoot td.rounded-foot-left              color: #99c;
{       background: #e8edff url('table-          }
images/botleft.png') left bottom no-repeat;      #gradient-style tbody tr:hover td
}                                                {      background: #d0dafd url('table-
#rounded-corner tfoot td.rounded-foot-right      images/gradhover.png') repeat-x;
{       background: #e8edff url('table-                 color: #339;}
images/botright.png') right bottom no-repeat;
}
#rounded-corner tbody tr:hover td
{       background: #d0dafd;
}

#pattern-style-a                                 #pattern-style-b
{       font-family: "Lucida Sans Unicode",      {       font-family: "Lucida Sans Unicode", "Lucida
"Lucida Grande", Sans-Serif;                     Grande", Sans-Serif;
        font-size: 12px;                                 font-size: 12px;
        margin: 45px;                                    margin: 45px;
        width: 480px;                                    width: 480px;
        text-align: left;                                text-align: left;
        border-collapse: collapse;                       border-collapse: collapse;
        background: url('table-                          background: url('table-images/patternb.png');
images/pattern.png');                            }
}                                                #pattern-style-b thead tr
#pattern-style-a thead tr                        {       background: url('table-images/patternb-
{       background: url('table-images/pattern-   head.png');
head.png');                                      }
}                                                #pattern-style-b th
#pattern-style-a th                              {       font-size: 13px;
{       font-size: 13px;                                 font-weight: normal;
        font-weight: normal;                             padding: 8px;
        padding: 8px;                                    border-bottom: 1px solid #fff;
        border-bottom: 1px solid #fff;                   color: #039;
        color: #039;                         }
}                                            #pattern-style-b td
#pattern-style-a td                          {       padding: 8px;
{       padding: 8px;                                border-bottom: 1px solid #fff;
        border-bottom: 1px solid #fff;               color: #669;
        color: #669;                                 border-top: 1px solid transparent;
        border-top: 1px solid transparent;   }
}                                            #pattern-style-b tbody tr:hover td
#pattern-style-a tbody tr:hover td           {       color: #339;
{       color: #339;                                 background: #cdcdee;
        background: #fff;                    }
}

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:113
posted:10/27/2011
language:English
pages:6