dreamweaver blue border
To ensure consistency across pages (and to “get with the times”, so to speak) instead of defining each element of each table separately, define the properties of the table and cells in your Cascading Style Sheet (CSS).
The “table” definition defines the outermost edge (is the container for) the array of cells.
The “td” definitions define the character of the individual cells.
A simple table definition
table.main {
border: 5px solid double;
border-color: #006400;
}
The word “table” tells the browser that you are defining a table.
The “.main” is the name of the table style. This way you can have several different tables styles defined for different purposes.
In the example, above, the table with have a thick dark green solid double border. You could replace the “solid” with the word “dashed” or “dotted” to make a dashed or dotted border. (See the note at the bottom of this article for a notice about different browsers)
Now, to create the table with the “main” style in your HTML page:
(table class=”main”)
Notice, for display purposes for this article, I have used parentheses in place of the opening and closing brackets due to display limitations. In practice you would use “” Instead of opening and closing parentheses.
Defining the cells:
Let’s suppose you would like the cells in the first column to be shaded gray to indicate labels. The text we want a pale blue. Lets define the name of the cell style “column1″ for simplicity.
Again, the “td” tells the browser we are defining a table cell, “.column1″ is the name of the style so we can easily remember that this is the format for the cells in column 1
td.column1 {
border: 1px solid;
border-color: black;
background-color: #cccccc;
color: #0000EE;
}
Cell Padding:
We can also position the text inside the cell by using padding. Padding is defined from the top, going around the cell clockwise. (Top, right, bottom, left)
So we could add a line like this: padding: 24px 12px 24px 4px;
This would make the top and bottom padded by 24 pixels, and the left and right four pixels respectively.
So our cells in the left column would look like:
td.column1 {
border: 1px solid;
border-color: black;
background-color: #CCCCCC;
color: #0000EE;
padding: 24px 12px 24px 4px;
}
The cell, above, has a 1 pixel thick black border, light blue text, pale gray background, with top and bottom padded 24 pixels, 4 pixels padding left and right.
For all the other cells, we want a white background, same padding, with black text and a single black border.
td.default {
border: 1px solid;
border-color: #000000;
padding: 24px 12px 24px 4px;
background-color: #FFFFFF;
color: #000000;
}
Let’s suppose you have a cell you wish to draw attention to. You can give it a yellow background. (We named the style “highlight” to remember easily):
td.highlight {
border: 1px solid;
border-color: #000000;
padding: 24px 12px 24px 4px;
background-color: #FFFF00;
color: #000000;
}
A simple little 3×3 table using CSS: (Remember, use “” Instead of opening and closing parentheses.)
(table class=”main”)
(tr)
(td class=”column1″)
Title Row 1
(/td)
(td class=”default”)
data, data, data…
(/td)
(td class=”default”)
data, data, data…
(/td)
(/tr)
(tr)
(td class=”column1″)
Title Row 2
(/td)
(td class=”default”)
data, data, data…
(/td)
(td class=”highlight”)
data, data, data…
(/td)
(/tr)
(tr)
(td class=”column1″)
Title Row 3
(/td)
(td class=”default”)
data, data, data…
(/td)
(td class=”default”)
data, data, data…
(/td)
(/tr)
(/table)
Note: Be careful. CSS tables may work differently with different browsers. Be sure to see what your finished product looks like in various browsers before considering the project a wrap.
Allen Howard is the senior Technical Support Representative for InfoServe Media, LLC. InfoServe Media is a full service business Website design company in Houston, Texas.
Custom Web design is our specialty.
In addition to exceptional website design that even a new business can afford, we also offer hosting and domain names. We can design a site that you can easily make minor changes to, yourself. We can build just about any site from a full-blown e-commerce site to a small “Presence” website. See our website for complete website design and hosting solutions including website promotion, Search Engine Optimization (SEO) services, and more.
dreamweaver blue border Questions
Adding a linked button to a website?
Im designing my own website, and have a section with buttons that link to my favourite websites. Im using dreamweaver, using the design section as Im still learning about coding and stuff, but when I publish my page the linked buttons all have a blue border around them that go purple when they are clicked. Is there a way to get rid of the blue borders so you just have the buttons??
Dreamweaver and changing the border color?
took over the malibuchronicle.com a while back and I’m not sure how the last person changed the corners of the homepage from light blue to darker blue down the page. Could anyone take a look at “View” and then “Source” and please let me know? I have a new Xara navagtional bar that I just bought seeing the last person had one on this site, but I don’t think that has anything to do with it.
Thanks a lot. How were you able to do that?
This image is used as the background:
http://www.malibuchronicle.com/malibu2/images/bg_page.jpg
The code is in the body tag:
dreamweaver blue border Videos
Remove the Blue Border from linked Images in Dreamweaver
It has never been easier to shop for dreamweaver blue border,
So run don”t walk and pick up dreamweaver blue border at bargain
prices!
