Solved

Table formatting and CSS

Posted on 2013-01-25
5
238 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
[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 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

732 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