Link to home
Start Free TrialLog in
Avatar of kyama74
kyama74

asked on

I need page with tables

I am looking for a page using tables.

Chanel Data:
data of the chanel
----------------------------------------------------------------------------------------------------
                         name:   cnn
                  description:   news from cnn
                           type:   type of news <drop down list> preview <button>
   search terms for you:   brief overview, this should be consice, gives enough info
                           size:   1200   <drop down list>
                        select:   <check box> preview here

Personal info:
whether or not they have the expertise to answer
-----------------------------------------------------------------------------------------------------
                           title:   city name
      serch terms of cnn:   select from <drop down boc>  here
                         result:   found <input box> results
                            info:   Experts collaborate and compete to answer your questions

      Default Source:
                        search:   select <drop down list> here.
                            info:   aaaa dddddddddddddddddddddddddddd
-------------------------------------------------------------------------------------------------------
                                                                                             <save> <cancel>
Avatar of vincent_figo
vincent_figo
i'm not sure what you mean here... You just want that info to put in an HTML table structure like:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
Avatar of UnexplainedWays
UnexplainedWays
<html>
<head>
<style type="text/css">

.LeftSide
{
      text-align:right;
}

.RightSide
{
      text-align:left;
}

</style>
</head>

<body>

<table border=0 width=100%>
<tr>
      <td colspan=2><b>Chanel Data:</b><br>data of the chanel<hr></td>
</tr>
<tr>
      <td class=LeftSide>name:</td>
      <td class=RightSide>cnn</td>
</tr>
<tr>
      <td class=LeftSide>description:</td>
      <td class=RightSide>news from cnn</td>
</tr>
<tr>
      <td class=LeftSide>type:</td>
      <td class=RightSide>type of news <select><option>Select</option></select> preview <input type=button value=button></td>
</tr>
<tr>
      <td class=LeftSide>size:</td>
      <td class=RightSide>1200  <select><option>Select</option></select></td>
</tr>
<tr>
      <td class=LeftSide>select:</td>
      <td class=RightSide><input type=checkbox> preview here</td>
</tr>
<tr>
      <td colspan=2><br><b>Personal info:</b><br>whether or not they have the expertise to answer<hr></td>
</tr>
<tr>
      <td class=LeftSide>title:</td>
      <td class=RightSide>city name</td>
</tr>
<tr>
      <td class=LeftSide>serch terms of cnn:</td>
      <td class=RightSide>select from <select><option>Select</option></select>  here</td>
</tr>
<tr>
      <td class=LeftSide>result:</td>
      <td class=RightSide>found <input type=text> result</td>
</tr>
<tr>
      <td class=LeftSide>info:</td>
      <td class=RightSide>Experts collaborate and compete to answer your questions</td>
</tr>
<tr>
      <td colspan=2><br><b>Default Source:</b><hr></td>
</tr>
<tr>
      <td class=LeftSide>search:</td>
      <td class=RightSide>select <select><option>Select</option></select> here.</td>
</tr>
<tr>
      <td class=LeftSide>info:</td>
      <td class=RightSide>aaaa dddddddddddddddddddddddddddd</td>
</tr>
<tr>
      <td colspan=2 class=LeftSide><hr><input type=button value=Save> <input type=button value=Cancel></td>
</tr>

</table>
Avatar of UnexplainedWays
UnexplainedWays
If you want to see the table, just change
<table border=0 width=100%>
to
<table border=1 width=100%>

and the with, change that to what ever % you want.
Avatar of kyama74
kyama74

ASKER

Hi UnexplainedWays ,

You captured all the details I want except positioning of elements.

Iam using this table inside another existing table and I want this table width of 480.

I donot want left and right should be positioned to size of table, I want to be approximately same like I explained in question.
    Default Source: elements should be within the Personalization block and it start position is same as my question(not same position as Personalization) and not related to left and right elements.

Avatar of UnexplainedWays
UnexplainedWays
<table border=0 width=480>

I'm not sure exactly what you want with the positions.
Avatar of kyama74
kyama74

ASKER

Personal info:
whether or not they have the expertise to answer
-----------------------------------------------------------------------------------------------------
                           title:   city name
      serch terms of cnn:   select from <drop down boc>  here
                    of sports
                          result:   found <input box> results
                            info:   Experts collaborate and compete to answer your questions
                                     aaaa dddddddd fffffffff

   Default Source:
                          search:   select <drop down list> here.
                            info:   aaaa dddddddddddddddddddddddddddd
-------------------------------------------------------------------------------------------------------
                                                                                             <save> <cancel>


I donot want title: city name should take half of table.
I want it be like title takes 40% and city name takes 60%.
if the title or city name not fit in 40,60% place it should start in next line in same position.
I tried to insert more text to line 'info:   Experts collaborate and compete to answer your questions aaaa dddddddd fffffffff' and it is going to next line but the 'info' shown as middle of two lines of text in right.
I want info: and first line of text in same line level and reminder of text next line in second line.

Default Source: is not same position as Personal Info:, it is 5-6 chars after the position of Personal info:
Avatar of UnexplainedWays
UnexplainedWays
There ya go, this should cover it.


<html>
<head>
<style type="text/css">

.LeftSide
{
      text-align:right;
      width:40%;
      vertical-align:text-top;
}

.RightSide
{
      text-align:left;
      width:60%;
      vertical-align:text-top;
}

</style>
</head>

<body>

<table border=0 width=480>
<tr>
      <td colspan=2><b>Chanel Data:</b><br>data of the chanel<hr></td>
</tr>
<tr>
      <td class=LeftSide>name:</td>
      <td class=RightSide>cnn</td>
</tr>
<tr>
      <td class=LeftSide>description:</td>
      <td class=RightSide>news from cnn</td>
</tr>
<tr>
      <td class=LeftSide>type:</td>
      <td class=RightSide>type of news <select><option>Select</option></select> preview <input type=button value=button></td>
</tr>
<tr>
      <td class=LeftSide>size:</td>
      <td class=RightSide>1200  <select><option>Select</option></select></td>
</tr>
<tr>
      <td class=LeftSide>select:</td>
      <td class=RightSide><input type=checkbox> preview here</td>
</tr>
<tr>
      <td colspan=2><br><b>Personal info:</b><br>whether or not they have the expertise to answer<hr></td>
</tr>
<tr>
      <td class=LeftSide>title:</td>
      <td class=RightSide>city name</td>
</tr>
<tr>
      <td class=LeftSide>serch terms of cnn:</td>
      <td class=RightSide>select from <select><option>Select</option></select>  here</td>
</tr>
<tr>
      <td class=LeftSide>result:</td>
      <td class=RightSide>found <input type=text> result</td>
</tr>
<tr>
      <td class=LeftSide>info:</td>
      <td class=RightSide>Experts collaborate and compete to answer your questions</td>
</tr>
<tr>
      <td colspan=2><br><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Default Source:</b><hr></td>
</tr>
<tr>
      <td class=LeftSide>search:</td>
      <td class=RightSide>select <select><option>Select</option></select> here.</td>
</tr>
<tr>
      <td class=LeftSide>info:</td>
      <td class=RightSide>aaaa dddddddddddddddddddddddddddd</td>
</tr>
<tr>
      <td colspan=2 class=LeftSide><hr><input type=button value=Save> <input type=button value=Cancel></td>
</tr>

</table>
Avatar of kyama74
kyama74

ASKER

<tr>
     <td class=LeftSide>type:</td>
     <td class=RightSide>type of news <select><option>Select</option></select> preview <input type=button

value=button></td>
</tr>

This line is not displayed properly.
'type of news' is slightly below the level of 'type:'
<drop down list> is same level as type:, looks like this one forced 'type of news' to slightly below the level of

'type:'.
Avatar of UnexplainedWays
UnexplainedWays
<html>
<head>
<style type="text/css">

.LeftSide
{
      text-align:right;
      width:40%;
      vertical-align:text-top;
}

.RightSide
{
      text-align:left;
      width:60%;
      vertical-align:text-top;
}

</style>
</head>

<body>

<table border=0 width=480>
<tr>
      <td colspan=2><b>Chanel Data:</b><br>data of the chanel<hr></td>
</tr>
<tr>
      <td class=LeftSide>name:</td>
      <td class=RightSide>cnn</td>
</tr>
<tr>
      <td class=LeftSide>description:</td>
      <td class=RightSide>news from cnn</td>
</tr>
<tr>
      <td class=LeftSide>type:</td>
      <td class=RightSide>type of news <br><select><option>Select</option></select> preview <input type=button value=button></td>
</tr>
<tr>
      <td class=LeftSide>size:</td>
      <td class=RightSide>1200  <select><option>Select</option></select></td>
</tr>
<tr>
      <td class=LeftSide>select:</td>
      <td class=RightSide><input type=checkbox> preview here</td>
</tr>
<tr>
      <td colspan=2><br><b>Personal info:</b><br>whether or not they have the expertise to answer<hr></td>
</tr>
<tr>
      <td class=LeftSide>title:</td>
      <td class=RightSide>city name</td>
</tr>
<tr>
      <td class=LeftSide>serch terms of cnn:</td>
      <td class=RightSide>select from <select><option>Select</option></select>  here</td>
</tr>
<tr>
      <td class=LeftSide>result:</td>
      <td class=RightSide>found <input type=text> result</td>
</tr>
<tr>
      <td class=LeftSide>info:</td>
      <td class=RightSide>Experts collaborate and compete to answer your questions</td>
</tr>
<tr>
      <td colspan=2><br><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Default Source:</b><hr></td>
</tr>
<tr>
      <td class=LeftSide>search:</td>
      <td class=RightSide>select <select><option>Select</option></select> here.</td>
</tr>
<tr>
      <td class=LeftSide>info:</td>
      <td class=RightSide>aaaa dddddddddddddddddddddddddddd</td>
</tr>
<tr>
      <td colspan=2 class=LeftSide><hr><input type=button value=Save> <input type=button value=Cancel></td>
</tr>

</table>
Avatar of kyama74
kyama74

ASKER

I donot see any new thing in previous post for my question.

<tr>
     <td class=LeftSide>type:</td>
     <td class=RightSide>type of news <select><option>Select</option></select> preview <input type=button value=button></td>
</tr>

Wherever the <dropdown list> or <input> types, the text before/after that are below lower level than the left side text heading.
Avatar of UnexplainedWays
UnexplainedWays
This line is different in my previous post:

 <td class=RightSide>type of news <br><select><option>Select</option></select> preview <input type=button value=button></td>
Avatar of kyama74
kyama74

ASKER

I want to be on same line.
Avatar of kyama74
kyama74

ASKER

does any one provide me this page.
Avatar of UnexplainedWays
UnexplainedWays
<html>
      <head>
            <style type="text/css"> .LeftSide { text-align:right; width:40%; vertical-align:text-top; }
      .RightSide { text-align:left; width:60%; vertical-align:text-top; }
      </style>
      </head>
      <body>
            <table border="1" width="480">
                  <tr>
                        <td colspan="2"><b>Chanel Data:</b><br>
                              data of the chanel<hr>
                        </td>
                  </tr>
                  <tr>
                        <td class="LeftSide">name:</td>
                        <td class="RightSide">cnn</td>
                  </tr>
                  <tr>
                        <td class="LeftSide">description:</td>
                        <td class="RightSide">news from cnn</td>
                  </tr>
                  <tr>
                        <td class="LeftSide" style="vertical-align:bottom">type:</td>
                        <td class="RightSide">type of news<select><option selected>Select</option>
                              </select>
                              preview <input type="button" value="button"></td>
                  </tr>
                  <tr>
                        <td class="LeftSide">size:</td>
                        <td class="RightSide">1200
                              <select>
                                    <option selected>Select</option>
                              </select></td>
                  </tr>
                  <tr>
                        <td class="LeftSide">select:</td>
                        <td class="RightSide"><input type="checkbox"> preview here</td>
                  </tr>
                  <tr>
                        <td colspan="2"><br>
                              <b>Personal info:</b><br>
                              whether or not they have the expertise to answer<hr>
                        </td>
                  </tr>
                  <tr>
                        <td class="LeftSide">title:</td>
                        <td class="RightSide">city name</td>
                  </tr>
                  <tr>
                        <td class="LeftSide">serch terms of cnn:</td>
                        <td class="RightSide">select from
                              <select>
                                    <option selected>Select</option>
                              </select>
                              here</td>
                  </tr>
                  <tr>
                        <td class="LeftSide">result:</td>
                        <td class="RightSide">found <input type="text"> result</td>
                  </tr>
                  <tr>
                        <td class="LeftSide">info:</td>
                        <td class="RightSide">Experts collaborate and compete to answer your questions</td>
                  </tr>
                  <tr>
                        <td colspan="2"><br>
                              <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Default Source:</b><hr>
                        </td>
                  </tr>
                  <tr>
                        <td class="LeftSide">search:</td>
                        <td class="RightSide">select
                              <select>
                                    <option selected>Select</option>
                              </select>
                              here.</td>
                  </tr>
                  <tr>
                        <td class="LeftSide">info:</td>
                        <td class="RightSide">aaaa dddddddddddddddddddddddddddd</td>
                  </tr>
                  <tr>
                        <td colspan="2" class="LeftSide"><hr>
                              <input type="button" value="Save"> <input type="button" value="Cancel"></td>
                  </tr>
            </table>
      </body>
</html>
Avatar of UnexplainedWays
UnexplainedWays
"I am looking for a page using tables." Done"
"Iam using this table inside another existing table and I want this table width of 480." Done
"I donot want title: city name should take half of table.I want it be like title takes 40% and city name takes 60%." Done
"Default Source: is not same position as Personal Info:, it is 5-6 chars after the position of Personal info:" Done
"'type of news' is slightly below the level of 'type:'" Done
ASKER CERTIFIED SOLUTION
Avatar of UnexplainedWays
UnexplainedWays
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of UnexplainedWays
UnexplainedWays
All that extra work, and only for a B, ah well.