Solved

Table formatting and CSS

Posted on 2013-01-25
5
232 Views
Last Modified: 2013-01-26
I'm pretty new to CSS and am trying to learn how to format tables easily.

In my HTML code, I have 2 tables.  I want to format one table with one style, and the second table with a different style.  I'm having problems getting the styles assigned and would love to learn what I'm doing wrong.

<html>
  <head>
    <style>
table1.table { border 1px; }
table1.th { border: 1px; }
table1.tr { border: 1px; }
table2.table { border 1px outset #e2e2e2; }
table2.th { border: 1px inset #fff; }
table2.tr { border: 1px inset #fff; }
    </style>
  </head>

  <body>

    <table class="table1">
      <tr>
        <th>Name</th>
        <th>Phone</th>
      </tr>
      <tr>
        <tr>Tim</tr>
        <tr>x4222</tr>
      </tr>
    </table>

    <table class="table2">
      <tr>
        <th>Name</th>
        <th>Food</th>
      </tr>
      <tr>
        <tr>Tim</tr>
        <tr>Pizza</tr>
      </tr>
    </table>

  </body>
</html>

Open in new window

0
Comment
Question by:ttitus
  • 2
  • 2
5 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 167 total points
ID: 38821504
It was not complete enough and you had 'tr' where 'td' should have been in several places.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
	<title>CSS Table borders</title>
    <style type="text/css">
.table1 table { border: 1px solid #000000; }
.table1 th { border: 1px solid #000000; }
.table1 td { border: 1px solid #000000; }

.table2 table { border: 1px outset #e2e2e2; }
.table2 th { border: 1px inset #fff000; }
.table2 td { border: 1px inset #fff000; }
    </style>
  </head>

  <body>

    <table class="table1">
      <tr>
        <th>Name</th>
        <th>Phone</th>
      </tr>
      <tr>
        <td>Tim</td>
        <td>x4222</td>
      </tr>
    </table>

    <table class="table2">
      <tr>
        <th>Name</th>
        <th>Food</th>
      </tr>
      <tr>
        <td>Tim</td>
        <td>Pizza</td>
      </tr>
    </table>

  </body>
</html>

Open in new window

0
 
LVL 7

Accepted Solution

by:
Element1910 earned 333 total points
ID: 38821506
Ok, here's the solution:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .table1 { border: 1px; }
        .table1 th { border: 1px; }
        .table1 td { border: 1px; }
        .table2 { border: 1px outset #e2e2e2; }
        .table2 th { border: 1px inset #fff; }
        .table2 td { border: 1px inset #fff; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table class="table1">
      <tr>
        <th>Name</th>
        <th>Phone</th>
      </tr>
      <tr>
        <td>Tim</td>
        <td>x4222</td>
      </tr>
    </table>

    <table class="table2">
      <tr>
        <th>Name</th>
        <th>Food</th>
      </tr>
      <tr>
        <td>Tim</td>
        <td>Pizza</td>
      </tr>
    </table>
    </div>
    </form>
</body>
</html>

Open in new window

For the original <tr> tags you had embedded within other <tr> tags, I've changed these to <td> tags because <tr> cannot contain other <tr> tags directly within the parent <tr>. Also, for the borders with just a simple width, it won't render anything unless you define the style of the border and the color.

Make sure for classes, you place a period(.) prior to the class definition and for ID's, you'll put a # instead. For the parent <table> tag, you don't need to define it as a subclass of the table1 or table2 classes, simply define .table1 and .table2.

For child table elements within the .table1 class such as <th> and <td>, just place a space after the class definition and it'll capture the style properly. For instance, to edit all <th> tags within the .table1 class, you will define it like this:
.table1 th{ styles css here; }

Open in new window

Hope this helps!
0
 

Author Comment

by:ttitus
ID: 38821549
So if the table did not have a class, but had an ID instead, i could define this as such:
        #table1 { border: 1px; }
        #table1 th { border: 1px; }
Would the above work?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38821630
Yes, but 'id's '#' are supposed to unique, only one on a page.  'classes' are meant to be used where ever you need them.
0
 
LVL 7

Assisted Solution

by:Element1910
Element1910 earned 333 total points
ID: 38822485
Yes, you can define them like that but then you'd need to create an ID for your tables. Remember as soon as you define them as an ID tag, they no longer work as classes and cannot be called from class="table1".
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now