Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Jun 2010
    Posts
    16
    Member #
    22224
    How do I make a box like such, with an image at the top of the box:


  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,324
    Member #
    27709
    Liked
    764 times
    this is a picture of a table... and although css is great and can do a lot of things....

    this is actually an example of correctly using a table as it is "tabular data" being displayed...

    yes you can add images to the TH tags on a table ( is suspect that is what they did )... slight gradient with a white space at the bottom... when repeated across the cell, looks like it has a white line across the bottom of it...

  4. #3
    Junior Member
    Join Date
    Jan 2012
    Location
    Devon, UK
    Posts
    16
    Member #
    30600
    Liked
    2 times

  5. #4
    Junior Member Dubai Web Design's Avatar
    Join Date
    Jan 2012
    Location
    pakistan
    Posts
    9
    Member #
    30539

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    2,181
    Member #
    27197
    Liked
    551 times
    Quote Originally Posted by Webzarus, post: 229905
    this is actually an example of correctly using a table as it is "tabular data" being displayed...
    Wait, you aren't supposed to use tables for everything in the whole site? :bounce:
    Roe Designs
    Web designer / Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,324
    Member #
    27709
    Liked
    764 times
    Quote Originally Posted by Ronald Roe, post: 230132
    Wait, you aren't supposed to use tables for everything in the whole site? :bounce:
    The original posted was asking about the attached image... It clearly shows a table for use with tabular data, nothing about "whole site "...

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,324
    Member #
    27709
    Liked
    764 times
    Had he posted a picture of the site... No way I would have said use tables...

    There is a purpose for tables... If used correctly. I know, some people would develop a CSS solution for this... But in reality, tables were originally designed for tabular data, "small amounts of data in a page" not for page layout.

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    2,181
    Member #
    27197
    Liked
    551 times
    Quote Originally Posted by Webzarus, post: 230169
    The original posted was asking about the attached image... It clearly shows a table for use with tabular data, nothing about "whole site "...
    I know. 'Twas sarcasm, sir.
    Roe Designs
    Web designer / Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Member
    Join Date
    Apr 2011
    Posts
    81
    Member #
    27344
    Liked
    3 times
    if you want to include an image at the top of your table instead of a header you just have to include the images between the <td></td> as such:

    <table>
    <tr>
    <td><img src="source1.jpg" width="20px" height="30"></td>
    <td><img src="source2.jpg" width="20px" height="30"></td>
    <td><img src="source3.jpg" width="20px" height="30"></td>
    </tr>
    <tr>
    <td>some text</td>
    <td>some text</td>
    <td>some text</td>
    </tr>
    </table>

    another alternative is to style the heading of the table with css instead of placing an image to keep page load faster.

    you can also embed the image within the <td></td> tags using css and setting the image as background image with the <td></td> tags.

    i hope this is clear

  11. #10
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,324
    Member #
    27709
    Liked
    764 times
    Actually it should be <th></th> = table header

    In CSS , just define the th class with a background image once and done ( as stated above ), no need tell the browser to load the image multiple times.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:39 AM.
Powered by vBulletin® Version 4.2.0
Copyright © 2014 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com