Reputation: 542

Use css to span width of screen

style.css

.headerBar table,tr,td{
    background-color: #f1f1f1;
    width: 100%;
    height: 44px;
    border: 0px;
    padding:0px;
    margin:0px; 
}

video.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="headerBar">
                <table>
                <tr>
                    <td>
                     FILL
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

Question 1: ~~I would like the table to span the width of the page, it won't~~. solved

Question 2: ~~I would like the table to sit at the very top of the page, so there are no borders or white space above, to the left, or to the right of the table.~~ solved

Question 3: Is there a better way of doing this? Possibly using something new to HTML5?

Thanks!

Upvotes: 0

Answers (6)

Josh Powell

Reputation: 6297

First off I would recommend using a div instead of a table for many reasons but that is just me.

A div allows you to do way more than a table will and it is far less confusing when you have to edit it months down the road.

HTML Page

<header>
    <p> My text here </p>
</header>
<div class="widthS">
    <p> Whatever you are trying to put here </p>
</div>
<footer>
    <p> Copyright </p>
</footer>

CSS Page

.widthS {
background: #f1f1f1;
width: 100%;
height: 44px;
border: 0px;
padding:0px;
margin:0px;
}

Now you can add some really fun css features such as box-shadow: 0px 1px 2px #2b2b2b; or border-radius: 7px 7px 0 0; or opacity: 0.5;. The first one adds an almost 90 degree angle drop shadow to an element, adds curved edges on the top corners, and this allows an element to be transparent.

Upvotes: 1

feitla

Reputation: 1334

To make it sit at the top with no borders, padding or width do something like this:

FIDDLE

<div class="headerBar">
    <table>
        <tr>
            <td>FILL</td>
        </tr>
    </table>
</div>

.headerBar table, tr, td {
    background-color: #f1f1f1;
    width: 100%;
    height: 44px;
    border: 0px;
    padding:0px;
    margin:0px;
    position:fixed; /** or absolute, depending on what you are trying to accomplish **/
    top:0;
    left:0;
}

And yes, you should not be using tables for styling or layouts. You can accomplish the same with just divs

<div class="headerBar">
    FILL
</div>

/** EDIT **/

To answer your third question, yes there are far better ways to do this... it doesn't necessarily involve HTML5, but just good HTML practice. If the project is big enough (and sometimes even if it isn't) you could and probably should use something like Twitter Bootstrap which is a front-end framework that could possibly be of great benefit to you by including design concepts and examples to get you started.

Upvotes: 1

pm.calabrese

Reputation: 376

you just need this for the first question:

.headerBar table{
    background-color: red;
    width: 100%;
    height: 44px;
    border: 0;
    padding:0;
    margin:0;
}

There will not be anyspace around the table if you do not add any element before.

And about the third question. If it gets little bit more complex that that i advice you to do two things.

Follow a screencast about html and css or read a good book there are many out there just google it ... and on top of that when you are little bit more familiar with those two languages start to use a framework like Bootstrap or Foundation from Zurb and do not forget to look their source code.

Upvotes: 0

Fabi

Reputation: 274

To your third question: It depends on what you want to do with the table... if you just use it to give your elements the right position, you should use div-elements and css instead. ;)

Upvotes: 0