5 Replies Latest reply on Mar 8, 2011 10:05 AM by wranglergirl

    center table contents

    wranglergirl

      I'm trying to center the contents of my table, the header portion, but it's not happening.  Any ideas?  Here's the stuff.

       

      CSS:

       

      table            { width:500px; margin:20px auto; border:1px #666 dotted; }
      thead, tfoot    { background-color:#E9F9A6; text-align:center;  }
      th, td            { padding:8px;  }
      th                { font-weight:bold; }
      tbody tr        { border-bottom:1px #ccc dotted; }
      tbody tr:hover    { background-color:#E9F9A6; }

       

      HTML:

       

      <table align="center" summary="This is a sample table for the project to demonstrate CSS table formatting">
              <thead>
              <tr>
                  <th colspan="3" scope="col"><a href="mailto:kbrown@washoe.k12.nv.us">Ms. Brown, Principal</a></th>
                  </tr>
              <tr>
                  <th scope="col"><h2>Teachers</h2></th>
                  <th scope="col"><h2>Support Staff</h2></th>
                  <th scope="col"> </th>
              </tr>
              </thead>
             
              <tbody>
              <tr>
                  <td><a href="mailto:abarajas@washoe.k12.nv.us">Abby Barajas</a></td>
                  <td><a href="mailto:kejohnson@washoe.k12.nv.us"></a></td>
                  <td> </td>
              </tr>
              <tr>
                  <td><a href="mailto:jbiggs@washoe.k12.nv.us">Jamie Biggs</a></td>
                  <td><a href="mailto:hfackelmann@washoe.k12.nv.us">Mrs. Fackelmann - Office</a></td>
                  <td> </td>
              </tr>
              <tr>
                  <td><a href="mailto:vbriggs@washoe.k12.nv.us">Virginia Briggs</a></td>
                  <td><a href="mailto:kboldi@washoe.k12.nv.us">Mrs. Boldi - Office</a></td>
                  <td> </td>
              </tr>
              <tr>
                  <td><a href="mailto:rcarlson@washoe.k12.nv.us">Robyn Carlson</a></td>
                  <td><a href="mailto:emieryteran@washoe.k12.nv.us">EriKa Mier y Teran - Clerk</a></td>
                  <td> </td>
              </tr>
              <tr>
                <td><a href="mailto:lcastillo@washoe.k12.nv.us">Lucy Castillo</a></td>
                <td><a href="mailto:jault@washoe.k12.nv.us">Lisa Murphey - Nurse</a></td>
                <td> </td>
                </tr>
              <tr>
                <td><a href="mailto:mdean@washoe.k12.nv.us">Margie Dean</a></td>
                <td><a href="mailto:sjohal@washoe.k12.nv.us">Ms. Johal - Lunchroom</a></td>
                <td> </td>
                </tr>
              <tr>
                <td><a href="mailto:mfolchi@washoe.k12.nv.us">Mrs. Folchi-Oddieo</a></td>
                <td><a href="mailto:kfleetwood@washoe.k12.nv.us">Kaci Fleetwood - Resource</a></td>
                <td> </td>
                </tr>
              <tr>
                <td><a href="mailto:hhannifen@washoe.k12.nv.us">Mrs. Hannifen</a></td>
                <td><a href="mailto:vtruce@washoe.k12.nv.us">Valerie Truce - ELL</a></td>
                <td> </td>
                </tr>
              <tr>
                <td><a href="mailto:pahenning@washoe.k12.nv.us">Pam Henning</a></td>
                <td><a href="mailto:kejohnson@washoe.k12.nv.us">Kathleen Johnson - Counselor</a></td>
                <td> </td>
                </tr>
              <tr>
                <td><a href="mailto:mfolchi@washoe.k12.nv.us">Victoria Ispisua</a></td>
                <td><a href="mailto:jault@washoe.k12.nv.us">Joanne Ault - Speech</a></td>
                <td> </td>
                </tr>
              <tr>
                <td><a href="mailto:jmentgen@washoe.k12.nv.us">Jennifer Mentgen</a></td>
                <td><a href="mailto:bgaither@washoe.k12.nv.us">Mr. Wayne - Site Facility Coordinator</a></td>
                <td> </td>
                </tr>
              <tr>
                <td><a href="mailto:jmentgen@washoe.k12.nv.us">Karen Utley</a></td>
                <td><a href="mailto:arasmussen@washoe.k12.nv.us">Amy Rasmussen - Librarian &amp; ETS</a></td>
                <td> </td>
                </tr>
              <tr>
                <td> </td>
                <td> </td>
                <td> </td>
                </tr>
              </tbody>
             
              <tfoot>
              <tr>
                  <td colspan="3"></td>
                  </tr>
              </tfoot>
          </table>
      </div>

        • 1. Re: center table contents
          Ken Binney-GnPIX3 Level 4

          <tfoot> must appear before <tbody> within a table, so that a browser can render the foot before receiving all the rows of data.

          http://www.w3schools.com/tags/tag_thead.asp

          • 2. Re: center table contents
            wranglergirl Level 1

            Well, if it comes before <tbody>, wouldn't it be the header?  I'm sorry, I don't understand.

            • 3. Re: center table contents
              osgood_ Level 8

              According to the WC3 specification the <tfoot></tfoot> section should appear before the <tbody></tbody> section. The <tfoot></tfoot> even though it comes before the <tbody></tbody> section still apears below it when output to a browser. (see page code below)

               

              To me, using your page code and css (below) it looks as though the <thead> text IS centered????

               

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
              <title>Untitled Document</title>
              <style type="text/css">
              table            { width:500px; margin:20px auto; border:1px #666 dotted; }
              thead, tfoot    { background-color:#E9F9A6; text-align:center;  }
              th, td            { padding:8px;  }
              th                { font-weight:bold; }
              tbody tr        { border-bottom:1px #ccc dotted; }
              tbody tr:hover    { background-color:#E9F9A6; }</style>
              </head>

               

              <body>
              <table align="center" summary="This is a sample table for the project to demonstrate CSS table formatting">
                      <thead>
                      <tr>
                          <th colspan="3" scope="col"><a href="mailto:someone.com">Ms. Brown, Principal</a></th>
                          </tr>
                      <tr>
                          <th scope="col"><h2>Teachers</h2></th>
                          <th scope="col"><h2>Support Staff</h2></th>
                          <th scope="col"> </th>
                      </tr>
                      </thead>
                     
                     
                     
                      <tfoot>
                      <tr>
                          <td colspan="3">hello</td>
                          </tr>
                      </tfoot>
                     
                     
                     
                    
                      <tbody>
                      <tr>
                          <td><a href="mailto:someone.com">Abby Barajas</a></td>
                          <td><a href="mailto:someone.com"></a></td>
                          <td> </td>
                      </tr>
                      <tr>
                          <td><a href="mailto:someone.com">Jamie Biggs</a></td>
                          <td><a href="mailto:someone.com">Mrs. Fackelmann - Office</a></td>
                          <td> </td>
                      </tr>
                      <tr>
                          <td><a href="mailto:someone.com">Virginia Briggs</a></td>
                          <td><a href="mailto:someone.com">Mrs. Boldi - Office</a></td>
                          <td> </td>
                      </tr>
                      <tr>
                          <td><a href="mailto:someone.com">Robyn Carlson</a></td>
                          <td><a href="mailto:someone.com">EriKa Mier y Teran - Clerk</a></td>
                          <td> </td>
                      </tr>
                      <tr>
                        <td><a href="mailto:someone.com">Lucy Castillo</a></td>
                        <td><a href="mailto:someone.com">Lisa Murphey - Nurse</a></td>
                        <td> </td>
                        </tr>
                      <tr>
                        <td><a href="mailto:someone.com">Margie Dean</a></td>
                        <td><a href="mailto:someone.com">Ms. Johal - Lunchroom</a></td>
                        <td> </td>
                        </tr>
                      <tr>
                        <td><a href="mailto:someone.com">Mrs. Folchi-Oddieo</a></td>
                        <td><a href="mailto:someone.com">Kaci Fleetwood - Resource</a></td>
                        <td> </td>
                        </tr>
                      <tr>
                        <td><a href="mailto:someone.com">Mrs. Hannifen</a></td>
                        <td><a href="mailto:someone.com">Valerie Truce - ELL</a></td>
                        <td> </td>
                        </tr>
                      <tr>
                        <td><a href="mailto:someone.com">Pam Henning</a></td>
                        <td><a href="mailto:someone.com">Kathleen Johnson - Counselor</a></td>
                        <td> </td>
                        </tr>
                      <tr>
                        <td><a href="mailto:someone.com">Victoria Ispisua</a></td>
                        <td><a href="mailto:someone.com">Joanne Ault - Speech</a></td>
                        <td> </td>
                        </tr>
                      <tr>
                        <td><a href="mailto:someone.com">Jennifer Mentgen</a></td>
                        <td><a href="mailto:someone.com">Mr. Wayne - Site Facility Coordinator</a></td>
                        <td> </td>
                        </tr>
                      <tr>
                        <td><a href="mailto:someone.com">Karen Utley</a></td>
                        <td><a href="mailto:someone.com">Amy Rasmussen - Librarian &amp; ETS</a></td>
                        <td> </td>
                        </tr>
                      <tr>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        </tr>
                      </tbody>
                    
                  </table>
              </div>
              </body>
              </html>

              • 4. Re: center table contents
                osgood_ Level 8

                Incidentally posting email address in the forum is open to harvesting by spam bots. If you can I would remove the email addresses from your first post.

                • 5. Re: center table contents
                  wranglergirl Level 1

                  Thank you for answering my question!  And yes, that was really dumb of me to post the addresses.  Duh!!  I will try to edit them out!