Table Border

Report · Nov 07, 2016

I'm trying to have a border only on the top and bottom of a table. I used this code to create the styles:

style="border-bottom: 1px solid #000000;"

style="border-top: 1px solid #000000;"

Then used it in my border thus (I assume TD stands for table definition):

<tbody>

<tr>

<td width="85%" align="left" nowrap="nowrap" bgcolor="#99CC66" class="style1"><a href="http://www/test/index.html" class="stylelinks">HOME</a> | <span class="style4"><span class="style5"><a href="http://www/test/stories.html"" class="stylelinks">STORIES</a></span></span>| <span class="style4"><span class="style5"><a a href="http://www/test/stories.html"" class="stylelinks">CONTACT ME</a> | <a href="a href="http://www/test/donate.html"" class="stylelinks">DONATE </a></span></span></td>

</tr>

</tbody>

</table>

But it didn't add any borders. Have I coded it wrong as I couldn't find any where else to set the table border properties?
Thanks

Alan

Report · Nov 07, 2016

First of all, is this for an HTML email or a web site? Web sites should not use table layouts or inline CSS styles. It's not good practice.

On web sites, CSS for table borders goes in your stylesheet.

table {

border: 1px solid #000;

border-left: none;

border-right: none;

width: 90%;

margin: 0 auto; /**centers it**/

}

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 07, 2016

Nancy

I have not graduated to the school of CSS yet so I'm trying to do it on an HTML page. Also I only want to add top and bottom borders on one table only.

Thanks

Alan

Report · Nov 07, 2016

Same answer as above except add an ID *unique identifyer* to your <table> tag.

blah, blah, blah...

</table>

And this goes inside your document's <head> tag. It's called an embedded stylesheet because it's inside the HTML document. Never use inline styles. Nothing good will come from it.

<style>

#myTable {

border: 1px solid #000;

border-left: none;

border-right: none;

width: 90%;

margin: 0 auto; /**centers it**/

}

</style>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 08, 2016

Nancy

My document already has my_styles_default.css If I add a that code inside the <style> </style> will that add that code to the default style sheet?

Also should I put all my font styles inside the <style> </style> such as

.stylestory {

font-family: Arial Narrow;

color: #2B2B2B;

font-size: 16px;

}

Thanks

Alan

Report · Nov 08, 2016

My advice is to put all your CSS code into one external stylesheet for your entire web site. That way, when you decide to make color or font changes, you can do it in 30 seconds from one file instead of tediously re-coding your entire web site.

If you need a page specific style (for one page only), you can add that below your external stylesheet link, inside <style> tags.

<style>

/**PAGE SPECIFIC STYLES**/

body {background: #000}

</style>

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 08, 2016

Nancy

Sorry to be pedantic but I'm new to DW. So to be clear I need to remove all of my font codes that I have created for my story webpage (I'm an author and post to a stories website as I don't have my own) such as story title, chapter title, story body, etc and add them to my CSS file?
Thanks
Alan

BTW

Is this the correct format for a font style in the CSS file?

/* font characteristics*/

<style>

storybody {

font-family: Arial;

color: #2B2B2B;

font-size: 16px;

background-color: #EDFCD9;

}

Etc

</style>

Report · Nov 08, 2016

Almost right.

Your selector name needs a hash tag or a dot in front of it.

#storybody (a unique ID can be used only 1 time per page)

.storybody (a re-usable class name, can be used as many times as needed).

HTML With an ID:

ALL OF YOUR STORY GOES HERE....

</div>

HTML with a class:

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 09, 2016

Nancy

Okay thanks for sticking with me on this journey. So in my_styles_default.CSS file I add this:

/* font characteristics*/

<style>

.storybody {

font-family: Arial;

color: #2B2B2B;

font-size: 16px;

background-color: #EDFCD9;

}

And in Code window of my story file I add this to make all of the text in the main body (the center cell of a table) be what my .storybody has defined in the CSS file?

<tbody>

<tr>

ALL OF YOUR STORY GOES HERE....

</div>

</tr>

</tbody>

</table>

Thanks

Alan

Report · Nov 09, 2016

You don't need tables for any of this.

You can simplify this a lot with a basic CSS layout.

<!doctype html>

<head>

<title>Unique Page Title</title>

<style>

/**MOVE THIS CSS CODE TO YOUR STYLESHEET**/

body {

width: 85%;

margin: 0 auto;

background-color: #EDFCD9;

font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;

color: #2B2B2B;

font-size: 16px;

}

.center { text-align: center; }

.right { text-align: right }

.justify { text-align: justify }

</style>

</head>

<body>

<h1 class="center">Heading 1</h1>

<h2 class="center">Heading 2</h2>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.</p>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim.</p>

</body>

</html>

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 09, 2016

Nancy

I must be doing something wrong. I added the link to my style sheet at the top of the page after <head>

I moved all my font styles to the style sheet e.g.

/* font characteristics*/

<style>

body {

font-family: 'Open Sans Condensed';

font-size: 16px;

text-align: left;

}

I added to my story template where the story text goes:

<tbody>

<tr>

ALL OF YOUR STORY GOES HERE....

</div>

</tr>

</tbody>

</table>

But in my template ALL OF YOUR STORY GOES HERE.... is in Times New Roman font.

Thanks

Alan

Report · Nov 09, 2016

Remvoe the <style> tag. It does not belong in a CSS file because it's HTML code.

When things don't work, fix your code errors.

CSS - http://jigsaw.w3.org/css-validator/

HTML5 - https://validator.w3.org/nu/

Review HTML and CSS code basics. You can't build web pages without coding skills.

W3Schools Online Web Tutorials

Good luck!

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 09, 2016

Nancy

It's the little things that trip you up. I was missing a period before the font name. DUH

Thanks for all your help and I have visited that W3School website.

Alan

Report · Nov 09, 2016

You should always include fallback fonts in case your Google font doesn't load.

font-family: 'Open Sans Condensed,'Arial Narrow',Arial,sans-serif;

See the CSS Font Stack for Win/Mac safe font-families.

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Table Border

1 Correct answer

Photos