Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts

    Create a Table with CSS

    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!

  • #2
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    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.
    Last edited by BoyWander; 04-05-2011 at 05:47 AM.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    I have done this before:
    Code:
    <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:
    Code:
     <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.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •