Practic CSS

Discussion in 'CSS' started by hasanzadeh, Jul 26, 2010.

  1. #1
    hi,i am learning css and for see a good practic, want to created table bellow.can anyone help me and created that with CSS.
    Thanks
    <html>
    
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>View P Time</title>
    </head>
    
    <body>
    
    <form method="POST" action="--WEBBOT-SELF--">
      <!--webbot bot="SaveResults" u-file="C:\wamp\www\_private\form_results.csv" s-format="TEXT/CSV" s-label-fields="TRUE" --><p>&nbsp;</p>
      <div align="center">
        <center>
        <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="46%" height="303">
          <tr>
            <td width="100%" colspan="4" height="57">
            <p align="center"><b>Learn Table &amp; CSS</b></p>
            <p>&nbsp;</td>
          </tr>
          <tr>
            <td width="27%" height="19"><b>Date:<font size="2">(GMT)&nbsp;&nbsp;&nbsp;
            </font></b></td>
            <td width="73%" colspan="3" height="19">
            <p align="left">&nbsp;yyyy/mmm/ddd&nbsp; &nbsp; 
                  <input name="date" type="text" id="date" size="20"></td>
          </tr>
          <tr>
            <td width="27%" height="19"><b>hour Time<font size="2">:</font></b></td>
              <td width="73%" colspan="3" height="19"> <p align="left">&nbsp;hh&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                  <select name="selecth" id="selecth">
                    <option value="equal">=</option>
                    <option value="great">&gt;</option>
                    <option value="less">&lt;</option>
                  </select>
                  <input name="hh" type="text" id="hh" size="5">
              </td>
          </tr>
          <tr>
            <td width="27%" height="19"><b>min. Time<font size="2">:</font></b></td>
              <td width="73%" colspan="3" height="19">&nbsp;mm&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                <select name="selectm" id="select2">
                  <option value="equal">=</option>
                  <option value="great">&gt;</option>
                  <option value="less">&lt;</option>
                </select>
                <input name="mm" type="text" id="mm" size="5"></td>
          </tr>
          <tr>
            <td width="27%" height="158">
            <p align="center"><b>Select </b></p>
            <p align="center"><b>your&nbsp; country</b></p>
            <p>&nbsp;</td>
            <td width="21%" height="158" nowrap>germany
            <input type="checkbox" name="Network[]" value="Birjand"><p>&nbsp;india<input type="checkbox" name="Network[]" value="Quchan">&nbsp;
            </p>
            <p>&nbsp;ireland <input type="checkbox" name="Network[]" value="Mashhad">&nbsp; </p>
            <p>&nbsp;kuwit&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="Network[]" value="Sari"></p>
            <p>&nbsp;</td>
            <td width="25%" height="158" nowrap>berzilia&nbsp;&nbsp;
            <input type="checkbox" name="Network[]" value="Tehran"><p>&nbsp;spania
            <input type="checkbox" name="Network[]" value="Semnan">&nbsp; </p>
            <p>&nbsp;andorra&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="Network[]" value="Yazd">&nbsp; </p>
            <p>&nbsp;albania&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="Network[]" value="Shiraz"></p>
            <p>&nbsp;</td>
            <td width="27%" height="158" nowrap>&nbsp;armenia&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="Network[]" value="Isfahan"><p>iran&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="Network[]" value="Tabriz">&nbsp; </p>
            <p>&nbsp;italy 
            <input type="checkbox" name="Network[]" value="Khoramabad">&nbsp;
            </p>
            <p>&nbsp;poland&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="Network[]" value="Kermansha"></p>
            <p>&nbsp;</td>
          </tr>
          <tr>
            <td width="100%" colspan="4" height="26">
            <p align="center"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></td>
          </tr>
        </table>
        </center>
      </div>
      <p>&nbsp;</p>
    </form>
    
    </body>
    
    </html>
    HTML:

     
    hasanzadeh, Jul 26, 2010 IP
  2. Layoutzzz

    Layoutzzz Greenhorn

    Messages:
    78
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    18
    #2
    Hi,
    Please look at example

    
    <p class="classname">Learn Table &amp; CSS</p>
    .classname
    {
    text-align:center;
    font-weight:bold;
    }
    
    Code (markup):
    
    <td class="classname">hour Time<span class="classname2">:</span></td>
    .classname
    {
    width:27%;
    height:19px;
    font-weight:bold;
    }
    .classname2
    {
    font-size:2em;
    }
    
    Code (markup):
    and etc ...

    I hope it will help you.
     
    Layoutzzz, Jul 26, 2010 IP