...

View Full Version : Create a Table with CSS



treeleaf20
04-05-2011, 03:07 AM
All,
I found the following template:
http://livedemo00.template-help.com/wt_33208/index.html

Basically the middle part where it has a larger image, then a smaller image in the right and some text on the bottom right. I'd like the same thing on my page but not in flash. Can anyone help me with the CSS to design something like this table? Thanks in advance!

BoyWander
04-05-2011, 06:18 AM
I don't think anyone is going to do it for you, but along your way of learning to do it yourself, you can ask questions about particular things.

EDITED after clicking your profile and learning that you at least know some html and css.


I am pretty sure you can put videos on a page with html....I think the code is <embed src="...."></embed>

I would put it inside a Div and width it 100% of the width of the div, and margin-top:0px;margin-bottom:33%; then you can put the text stuff on the bottom 33% of the div, and float it left, with the bigger box being to the left of it.

You would have to make your own videos, of course - in fact, Flash I think is mostly about videoclips.

treeleaf20
04-05-2011, 03:01 PM
Yeah, I checked out the source to see if they had a CSS but like you said it's already in a Flash file. I'm not trying to create a flash file but just want to create the same thing in HTML.

treeleaf20
04-05-2011, 10:26 PM
I have done this before:


<style type="text/css">
#container {
width: 870px;
/*margin: 30px auto;*/
overflow: auto;
font-size: 0.8em;
}
#left {
height: 400px;
background: #fcc;
width: 275px;
float: left;
background-color:#FFFFFF;
padding: 5px 0 0 10px;
}
#right {
height: 400px;
margin: 0 0 0 0;
width: 270px;
float: right;
background-color:#FFFFFF;
padding: 5px 0 0 10px;
}
#center {
margin: 0 0 0 295px;
height: 400px;
width:275px;
background-color:#FFFFFF;
padding: 5px 0 0 10px;
}
</style>


Then the HTML:

<div id="container">
<div id="left">Left Text</div>
<div id="right">Right Text</div>
<div id="center">Center Text</div>
</div>


I'm just not sure how to manipulate it so that I can get the layout and the white lines separating the different divs. If anyone could help with that I'd appreciate it. Thanks.

teedoff
04-06-2011, 01:13 AM
Your post is rather confusing. The title says create a table with css, but you're actually working with div layouts correct?

Either way, please post all of your code, html and css, so we can look at what you've done so far.

alma111
04-06-2011, 02:12 PM
Create a Table with CSS
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 3x3 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)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum