SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    Australia
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Putting table markup into css rather than html

    Gudday all
    It's time that I started to clean up my wife's site (and my own act) again.
    I have never bothered with the table's marking up but now it is time.
    1. Keeping border look and feel
    Currently I use
    Code:
     <table class="itemtable" align="center" cellpadding="1" border="1">
    to get the table's border look & feel but I would like to put the align, cell padding, border into css.
    itemtable looks like
    Code:
    .itemtable {Color:Black; font-size:12px; font-family: Arial, "Times New Roman", Verdana, Garamond; text-align:center;}
    I have being fiddling around but note that if I use
    Code:
     border 1px;
    within css the look changes and not for the better.
    I (the missus) would like to keep the look the same. See http://www.petalsandpatches.com/onfreedomswings.htm as an example.
    How do I get
    Code:
    border="1"
    within
    Code:
    border: ??
    cellpadding: ??
    and yet keep the look the same?

    2. What is the "default" text family?
    Currently I use the following code to set font-size
    Code:
    <div id="cont">
    <p style="font-size:12px"> blah </p>
    See the introductory blurb on http://www.petalsandpatches.com/onfreedomswings.htm.
    I would like to have the text within tables look like the introduction but cannot get it to look the same. What should I put into itemtable viz. font-family, font-size etc. to have the text in the table look like the text outside the table? And is it better to use px, em or something else?

    Many thanks for all and any help.
    ========================
    Carn the Tiges!
    www.petalsandpatches.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,781
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Quote Originally Posted by Tigers! View Post
    Gudday all
    It's time that I started to clean up my wife's site (and my own act) again.
    I have never bothered with the table's marking up but now it is time.
    1. Keeping border look and feel
    You can change the borders individually like any css border to match the old (very old fashioned) style table rules. You can also adjust the cellspacing using css border-spacing (ie8+).

    Here's a simple example that you can play with:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    table {
    	width:50%;
    	border:1px solid #000;
    	border-top:1px solid #b2b2b2;
    	border-left:1px solid #b2b2b2;
    	border-spacing:2px;
    	border-collapse:separate;
    }
    td {
    	border:1px solid #000;
    	border-right:1px solid #b2b2b2;
    	border-bottom:1px solid #b2b2b2;
    	padding:1px;
    }
    </style>
    </head>
    
    <body>
    <table>
    		<tr>
    				<td>1</td>
    				<td>2</td>
    		</tr>
    		<tr>
    				<td>3</td>
    				<td>4</td>
    		</tr>
    		<tr>
    				<td>5</td>
    				<td>6</td>
    		</tr>
    		<tr>
    				<td>7</td>
    				<td>8</td>
    		</tr>
    		<tr>
    				<td>9</td>
    				<td>0</td>
    		</tr>
    </table>
    </body>
    </html>
    Note that the rules above would affect all tables so you would need to add a class to the table and to the css to make it specific to the table in question.


    2. What is the "default" text family?
    It depends on the browser or the user settings or styles that are cascading into the table form other parent elements. In your page the body has been set to arial which means the intro text will be arial and so will the rest of the content in the page assuming you haven't over-ridden it anywhere. However in your table class you have changed it to verdana which is why it is different.

    Code:
    .itemtable {color:Black; font-size:12px; font-family:Verdana, Garamond, "Times New Roman", Arial; text-align:center;}
    Just remove the whole font-family rule and it will revert to Verdana (apart from old versions of IE which need specific font size and family re-applied to tables).

    Do a search of the forum threads as there is recent in-depth thread on whether to use ems or pixels for layout (hint - use ems for mre scalable results but the issues aren't always so clear cut).

  3. #3
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Tigers! View Post
    Gudday all
    It's time that I started to clean up my wife's site (and my own act) again.
    I have never bothered with the table's marking up but now it is time.
    1. Keeping border look and feel
    Currently I use
    Code:
     <table class="itemtable" align="center" cellpadding="1" border="1">
    to get the table's border look & feel but I would like to put the align, cell padding, border into css.
    itemtable looks like
    Code:
    .itemtable {Color:Black; font-size:12px; font-family: Arial, "Times New Roman", Verdana, Garamond; text-align:center;}
    Before answering your question, I'll just add that that font stack doesn't make any sense. The first font you list should be the one that you want to be used if it's available, followed up fallback options (in decreasing preference but increasing popularity), ending with serif or sans-serif. If you start with Arial, there's no point in listing other Windows fonts after that, because anyone who has those fonts will have Arial as well. And you want to have similar looking fonts in there so that you get a similar outcome, whichever font is used. None of those fonts are remotely similar to each other (OK, Garamond and TNR are not worlds apart, but Garamond is not fit for web deployment anyway), so they don't belong in the same font stack.
    I have being fiddling around but note that if I use
    Code:
     border 1px;
    within css the look changes and not for the better.
    I (the missus) would like to keep the look the same. See http://www.petalsandpatches.com/onfreedomswings.htm as an example.
    How do I get
    Code:
    border="1"
    within
    Code:
    border: ??
    cellpadding: ??
    and yet keep the look the same?
    If you want to recreate the traditional HTML table borders in CSS, you need the following code in your CSS:
    Code:
    table {border:1px outset;}
    td {border:1px inset;}
    2. What is the "default" text family?
    Currently I use the following code to set font-size
    Code:
    <div id="cont">
    <p style="font-size:12px"> blah </p>
    See the introductory blurb on http://www.petalsandpatches.com/onfreedomswings.htm.
    I would like to have the text within tables look like the introduction but cannot get it to look the same. What should I put into itemtable viz. font-family, font-size etc. to have the text in the table look like the text outside the table? And is it better to use px, em or something else?
    Your font declarations are absolutely all over the shop. I would go through your CSS file and strip out every font declaration – size and family. Then start by adding it back in only on body {...}. That will then be inherited to all elements, you don't need to apply it to each and every one. You can then go through and style headings or other individual elements differently if you want them different.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,781
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Code:
    table {border:1px outset;}
    td {border:1px inset;}
    Note that IE9 and under will not color the borders differently at 1px which is why I reverted to individual border colours (I originally used inset and outset also ).

  5. #5
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Note that IE9 and under will not color the borders differently at 1px which is why I reverted to individual border colours (I originally used inset and outset also ).
    Another great leap forwards for the browser we all love hate


Bookmarks

Posting Permissions

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