Solved

Table formatting and CSS

Posted on 2013-01-25
5
231 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 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 167 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

744 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

16 Experts available now in Live!

Get 1:1 Help Now