Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Table formatting and CSS

Posted on 2013-01-25
5
Medium Priority
?
254 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:Tim Titus
  • 2
  • 2
5 Comments
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 668 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 1332 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:Tim Titus
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 84

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 1332 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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

916 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