Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Table formatting and CSS

Posted on 2013-01-25
5
Medium Priority
?
244 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

722 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