HTML - How To Create Table With Many Rows And Coloumns With Scroll Option

Hi All,

Am a bit of a newbie here. I'm having a little problem with a table that I created on Wordpress. After creating the table, the image below shows how it looks like on the Wordpress editor:



But, once published, the row alignment is a bit off. Here's the url: http://runfest.my/?page_id=346

Appreciate some advice on what went wrong and how I can fix it. Thanks a bunch!

Hi there, I'm a bit of a noob to HTML, and I'm working on creating a site for my webcomic.

The main portion of the layout has a simple table with a header and footer at the top and bottom rows. It's supposed to look like



Instead it looks like



The code for the table is this:
Quote:
<table align="center" cellpadding="0" cellspacing="0" border="0" width="725">
<tr>
<td width="725" valign="bottom" border="0">
<img src="/images/header.png" width="725" height="33" /></td>
</tr>
<tr>
<td width="725" bgcolor="0099CC" align="center">
<p>***todays_comics***<p>***first_day*** ***previous_day*** ***next_day*** ***last_day***
</td>
<tr>
<td width="725" valign="top" border="0">
<img src="/images/footer.png" width="725" height="33" /></td>
</tr>
</table>
Whenever I put the code into an HTML test bed, it works fine, but for some reason refuses to work when I upload it to my FTP. It's driving me crazy. If you could help, I'd really appreciate it. Thanks.

Can anyone tell me why there is a space at the bottom of my page between the images in the middle and the bottom image? The page looks fine in Firefox and I cannot figure out why there is a space in IE7. Any suggestions would be greatly appreciated. Thanks

Frank

http://www.spartafitness.com/home.htm

I am working on a layout for a website, I'm not new at all to HTML, it's just been a while. I have a banner taking up the first row of the table(colspan=2), and for the 2nd row, I have a menu and a text region. This 2nd row always has a small space between it and the 1st, even if cellspacing=0. Is there any way to do this with a simple <table>??? Someone told me that using a table would be less effective than using <div>, is this true? If so, how would I do this using <div>. Thank you for any suggestions.

Hello Everyone,

I have two pairs of jsp + servlet. The first jsp asks user to select an option from the drop down box and then on the click of submit button, passes this info to another servlet, who processes the data from db based on the input and displays the requested data in a table using second jsp page.

My code is working but I'm trying to make my code look more appealing.

Here is what the problem is:
1. The first page just has two drop down boxes with rest of the page blank.
2. Once the user selects the choice from first page, second page is displayed which does not anymore display what user chose in the drop down.

What I want:
is that initially the first page contains only drop down but as soon as the user hits the submit button, instead of loading a whole new page, the requested data is displayed right below the drop down boxes.

Will this require to combine two jsp pages into one.....if yes, how do I make the table disappear the first time until some input is chosen.

I know this is very basic html but as this is my first time, will appreciate the help.

Thanks.

Hi. I'm working on a fairly complicated web form and need to align input boxes horizontally across a lefthand column, a multi-row nested table, and a righthand column. This works OK (as long as cellpad and cellspace are set to 0) except that at one point I need to put text in the right-hand column instead of an input box, and this throws the alignment out. The simplified code below shows what I mean. As given below the boxes are aligned properly. But if you comment out the version A row and substitute the version B row, the alignment goes.

Can anyone explain why this happens, and whether there's a way round it ? The form in question does have to be a table, by the way. Would be grateful for any suggestions !

Thanks

Dedge

<form>
<table width='100%' cellspacing='0' cellpadding='0' border='0'>
<tr>
<td>Item name</td>
<td rowspan='5'>
<table cellspacing='0' cellpadding='0' border='0'>
<tr>
<td><input name='i1' id='i1' size='1' maxlength='1'></td>
<td><input name='i2' id='i2' size='1' maxlength='1'></td>
</tr>
<tr>
<td><input name='i3' id='i3' size='1' maxlength='1'></td>
<td><input name='i4' id='i4' size='1' maxlength='1'></td>
</tr>
<tr>
<td><input name='i5' id='i5' size='1' maxlength='1'></td>
<td><input name='i6' id='i6' size='1' maxlength='1'></td>
</tr>
<tr>
<td><input name='i7' id='i7' size='1' maxlength='1'></td>
<td><input name='i8' id='i8' size='1' maxlength='1'></td>
</tr>
<tr>
<td><input name='i7' id='i7' size='1' maxlength='1'></td>
<td><input name='i8' id='i8' size='1' maxlength='1'></td>
</tr>
</table>
</td>
<td>Item name</td>
<td><input name='ia' id='ia' size='1' maxlength='1'></td>
</tr>
<tr>
<td>Item name</td>
<td>Item name</td>
<td><input name='ib' id='ib' size='1' maxlength='1'></td>
</tr>
<tr>
<td>Item name</td>
<td>Item name</td>
<td><input name='ic' id='ic' size='1' maxlength='1'></td>
</tr>
<!--VERSION A-->
<tr>
<td>Item name</td>
<td>Item name</td>
<td><input name='ic' id='ic' size='1' maxlength='1'></td>
</tr>
<!--END OF VERSION A-->
<!--VERSION B-->
<!--<tr>
<td>Item name</td>
<td colspan='2' align='right'>SOME TEXT</td>
</tr>-->
<!--END OF VERSION B-->
<tr>
<td>Item name</td>
<td>Item name</td>
<td><input name='ie' id='ie' size='1' maxlength='1'></td>
</tr>
</table>
</form>

Ok, I am creating a calculator with html and javascript. I am using a table to format the buttons and text displays. The code is posted below with the table itself. It is supposed to be 3 cells height and 1 cell width but it turns out as 2 cells width and 2 cells height. I can't figure out the error in my code so can someone please figure out what is wrong with my tags:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type=text/css>

input
{

	background-color: black;
	color: white;

}

th
{

	background-color: black;
	color: white;
	
}

td
{

	background-color: green;
	
}

</style>
<script type="text/javascript">

var a;
var b;
var c;
var d;
var e;
function inputtext(inputtext)
{

	a=document.getElementById("inputcalculation").value;
	b=inputtext;
	c=a+b;
	document.getElementById("inputcalculation").value=c;

}

function Evaluate()
{

	d=document.getElementById("inputcalculation").value;
	e=eval(d);
	document.getElementById("outputcalculation").value=e;
	document.getElementById("inputcalculation").value="";

}
</script>

<title>Help-In-Math Calculator</title>

</head>
<body>

<table border="1">

<tr>
	<th colspan="11" style="background-color: black">
		<center>
		<input type="text" id="inputcalculation" value="" />
		</center>
	</th>
</tr>


<tr>
	<td colspan="11" rowspan="5">
		<center>
		<input type="button" value="1" onclick="inputtext('1')" /> <input type="button" value="2" onclick="inputtext('2')" /> <input type="button" value="3" onclick="inputtext('3')" /> <input type="button" value="+" onclick="inputtext('+')" />
		<br />
		<input type="button" value="4" onclick="inputtext('4')" /> <input type="button" value="5" onclick="inputtext('5')" /> <input type="button" value="6" onclick="inputtext('6')" /> <input type="button" value="-" onclick="inputtext('-')" />
		<br />
		<input type="button" value="7" onclick="inputtext('7')" /> <input type="button" value="8" onclick="inputtext('8')" /> <input type="button" value="9" onclick="inputtext('9')" /> <input type="button" value="X" onclick="inputtext('*')" />
		<br />
		<input type="button" value="0" onclick="inputtext('0')" /> <input type="button" value="." onclick="inputtext('.')" /> <input type="button" value="00" onclick="inputtext('00')" /> <input type="button" value=&#247 onclick="inputtext('/')" />
		<br />
		<input type="button" value="EVALUATE" onclick="Evaluate()" style="background-color: blue"/>
		</center>
	</td>
</tr>


<tr>
	<td colspan=11>
		<input type="text" id="outputcalculation" onfocus="blur()" />
	</td>
</tr>


</table>

</body>
</html>

Despite reading multiple posts on "scrollable" table cells on the forums, I've not yet quite found the answer to my question, so hopefully I can get some feedback from all viewers out there!

I and some friends run a small Catholic arts and crafts website (www.illuminatedink.com) through which we sell products that we create. I've based the page layout on a table instead of frames or iframes. The table has 3 cells in it. The entire top "banner area" of the screen is one cell. Below that on the left we have the naviagation menu cell. The main content that someone is trying to view appears in the remaining lower right cell (also the largest).

This page works great on all the computers at my house (3 of them) and on most other computers as well. I have yet to test this in IE 7.0, but if someone else has that browser, please let me know what happens.

So, what's the problem you ask? That lower right table cell where all the content appears does not work for everyone. I just got another complaint today that no scroll bar appears and the person can only see what's in the top of cell, there is no "scrollability". Here is a sample (with notes made by me in ** NOTE ** format). The notes are of course not in the actual code, I am showing only the code really matters here.

Code:

<BODY STYLE="margin-top: 0px; margin-left: 0px">
  <TABLE CELLPADDING=0 CELLSPACING=0 HEIGHT=590 WIDTH=1000>
    <TR HEIGHT=90>
      <TD WIDTH=1000 COLSPAN=2 STYLE="background-image:url('http://www.illuminatedink.com/images/background/banner.jpg')">
        &nbsp
      </TD>
    </TR>

    <TR HEIGHT=500>
      <TD VALIGN=top WIDTH=200 STYLE="background-image:url('http://www.illuminatedink.com/images/background/menu_bar.jpg');background-repeat:no-repeat">
        <TABLE ALIGN="center" CELLSPACING=0 CELLPADDING=0>
          **Navigation menu on the left side goes here**
        </TABLE>
      </TD>
      
      <TD WIDTH=800 VALIGN="top">
        <DIV STYLE="overflow:auto;height:490px;width:800px;position:absolute;left:200;padding-right:30px; padding-left:0px"><MAP NAME="page_links">
          **All code for the scrollable cell in the lower right goes here**
        </DIV>
      </TD>
    </TR>
  </TABLE>
</BODY>

So, can anyone possibly tell me why this would have a scroll bar in some browers and not in others? Or does anyone have any code changes I could make that may guarantee that they will get a scroll bar in that lower right cell? The complaints that I have received mainly seem to be from Mac users using IE for Mac. But I just had someone who had a brand new Dell with Windows XP Prof. and the most recent IE 6, which is exactly the configuration I run, but didn't get a scroll bar when I did. Ideas? Thank you!

Hello,
I have a table (with one cell). The table can be quite big (200 items) so I would like the user to be able to scroll it up and down... and I want the user to be able to add and delete an item.
I have done something with javascript but it is not complete.. the delete does not work correctly ... the scroll up and down shown the same table.
I don't have a clue on how to do the add button.
Could you help me please?
Here is what I have done so far....
Code:

<html>
<head>
<title>Insert/Delete Table Row using DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/ccs">
<!--

form {border:1px solid blue;}
div {border:1px solid red; width:150px; overflow:auto;}
.selectBox { font-size:xx-small;overflow:auto;}

#tblSample td,th {padding:0.5em;}
.classy0 { background-color: #234567; color:#89abcd;}
.classy1 {background-color: #89abcd; color:@234567;}
-->
</style>
<%@ include file="javascriptLib.html" %>
<script language="JavaScript" type="text/JavaScript">
<!--- oculta el script para navegadores antiguos
var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script
var TABLE_NAME = 'items_list'; // this should be named in the HTML
var LABEL_NAME = 'label_list';
var ROW_BASE = 1; // first number (for display)
var MAXLENGTH=5;


function myRowObject(one,two)
{
this.one = one; // text object
this.two = two; // input text object
}

function deleteCurrentRow(obj)
{
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode.parentNode;
var rIndex = delRow.sectionRowIndex;
var rowArray = new Array(delRow);
deleteRows(rowArray);
reorderRows(tbl, rIndex);
}

function deleteRows(rowObjArray)
{
for (var i=0; i<rowObjArray.length; i++)
{
  var rIndex = rowObjArray[i].sectionRowIndex;
  rowObjArray[i].parentNode.deleteRow(rIndex);
}
}

function reorderRows(tbl, startingIndex)
{
if (tbl.tBodies[0].rows[startingIndex])
{
  var count = startingIndex + ROW_BASE;
  for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++)
  {
    // CONFIG: next line is affected by myRowObject settings
    tbl.tBodies[0].rows[i].myRow.one.data = count; // text

    // CONFIG: next line is affected by myRowObject settings
    tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count; 
    var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' '); 
    tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);

    count++;
  }
}
}

function clearTable(option)
{
var tbl = document.getElementById(TABLE_NAME);
if (option != 0)
  tbl=  document.getElementById(LABEL_NAME);
//var lastRow = tbl.tBodies[0].rows.length;
var lastRow = tbl.rows.length;
var i=lastRow-1;
while (i>=0)
{
 tbl.deleteRow(i);
 i--;
}
}

function showRow (val)
{
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
//var nextRow=tbl.rows.length;
var iteration = nextRow + ROW_BASE;
var row = tbl.tBodies[0].insertRow(nextRow);
row.className = 'classy' + (iteration % 2);
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.setAttribute('type', 'text');
txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
txtInp.setAttribute('size', '77');
txtInp.setAttribute('value', val); 
txtInp.readOnly = true;
cell1.appendChild(txtInp);
}

function addRowToTable(val,num)
{
  var tbl = document.getElementById(TABLE_NAME);
  var nextRow = tbl.tBodies[0].rows.length;
  var iteration = nextRow + ROW_BASE;
  if (num == null)  // appends to the end of the table
  {
    num = nextRow;
  }
  else // Insert at row num
  {
    iteration = num + ROW_BASE;
  }

  // add the row
  var row = tbl.tBodies[0].insertRow(num);

  // CONFIG: requires classes named classy0 and classy1
  row.className = 'classy' + (iteration % 2);

  // CONFIG: This whole section can be configured

  // cell 0 - index
  var cell0 = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cell0.appendChild(textNode);

  // cell 1 - input text
  var cell1 = row.insertCell(1);
  var txtInp = document.createElement('input');
  txtInp.setAttribute('type', 'text');
  txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
  txtInp.setAttribute('size', '62');
  txtInp.setAttribute('value', val); // iteration included for debug purposes
  txtInp.readOnly = true;
  cell1.appendChild(txtInp);

  // cell 2 - delete button
  //-----------------------
  var cell2 = row.insertCell(2);
  var btnEl = document.createElement('input');
  btnEl.setAttribute('type', 'button');
  btnEl.setAttribute('value', 'Delete');
  btnEl.onclick = function () {deleteCurrentRow(this)};
  cell2.appendChild(btnEl);

  // Store the myRow object in each row
  row.myRow = new myRowObject(textNode,txtInp);

}

function paintTable(index)
{
  var maxLine=index+MAXLENGTH;
 clearTable(0);

 // add Row with delete and insert options
 //----------------------------------------
 services=document.forms[0].items.value;
 if ((services != null) && (services != ""))
 {
   var services_array=services.split("|");
   sLength=services_array.length ;

   if (services_array.length < maxLine)
       maxLine=sLength;

  // add Row with delete options
  //-----------------------------
   for (var i=index; i < maxLine; i++)
   {
     val=services_array[i];
     //showRow(1,val);
      addRowToTable(val);
   }

   showLabel(index,sLength);
  }
}

function showLabel(index,max)
{
clearTable(1);

next_val=index+MAXLENGTH;
prev_val=index-MAXLENGTH;
var tbl = document.getElementById(LABEL_NAME);
var nextRow = tbl.tBodies[0].rows.length;

// add Previous and/or Next buttons
//---------------------------------
var row = tbl.tBodies[0].insertRow(nextRow);
var celNo=0;
if (index !=0)
{
  var cell0 = row.insertCell(celNo);
  var btnEl0 = document.createElement('input');
  btnEl0.setAttribute('type', 'button');
  btnEl0.setAttribute('value', 'Previous');
  btnEl0.onclick = function () {paintTable(prev_val)};
  cell0.appendChild(btnEl0);
  celNo++;
}

if (next_val <= max)
{
  var cell1 = row.insertCell(celNo);
  var btnEl1 = document.createElement('input');
  btnEl1.setAttribute('type', 'button');
  btnEl1.setAttribute('value', 'Next');
  btnEl1.onclick = function () {paintTable(next_val)};
  cell1.appendChild(btnEl1);
}
}

// end hiding from old browsers -->
</script>
</script>
</head>
<body onLoad=paintTable(0)>
<form onSubmit="return false" method="post" name="my_form" action="">
<table border= "2" cellspacing="0" id="items_list" >
<tbody></tbody>
<input type=hidden name="items" value="1|2|3|4|5|6|7|8|9|10|11">
</table>
<P><P><table border="1" id="label_list">
<tbody></tbody>
</form>
</body>
</html>

Please, help me!
Thanks

Good day,

I am brand new here in this forum. So many knowledgeable folks here.

I am relatively new to web design. I typically use templates and themes and tweak them. I can navigate a CSS doc and html to make changes, etc. However, I have a client who has an existing site that she wants to keep the aesthetic of and so I am using what the previous designer left. It is a simple html page with tables. Simple enough. Very elegant visually. No need to SEO really so it works.

She has asked if we can make the left column of a two column table scroll independently. The page content is about over 6000px. The scroll column will contain a page outline and other text that will include internal targeted links. This is outside my skill set, but I want to learn. Have searched the net and found some suggestions but want it to be clean and ended up here.

There is no style sheet other than the ie6 sheet.

Page is he http://www.themedeaproject.com/proposaltestpage.html no graphics are loaded.

Can anyone point me to a good tutorial or have any suggestions?

Thanks!

BlueEyedMonkey aka Tatyanna

Hi,

Is there any way such that i can use ordered list to number the rows of a table??

Nikhil

Hi,

I'm having a basic problem with a HTML table. It displays exactly how I want on Firefox 3.5.15 but on Internet Explorer 8 is does not.

Can anyone point out what I need to do to get this table displaying in IE as it does in Firefox?

Below is my HTML table and I suspect IE 8 is ignoring 'rules = rows';

<?php
echo '<TABLE bordercolor=#000000 cellspacing=0 cellpadding=10 border=0 rules=rows frame=box width="90%">'."\n";
echo '<tr>';
echo '<td><B><font size=1>Test Name</font></B></td><td><B><font size=1>Date</font></B></td><td>';
echo '</tr>';
echo '<tr>';
echo '<td><font size=1>Test Number 1</font></td><td><font size=1>01/01/2010</font></td>';
echo '</tr>';
echo '<tr>';
echo '<td><font size=1>Test Number 2</font></td><td><font size=1>02/01/2010</font></td>';
echo '</tr>';
echo '<tr>';
echo '<td><font size=1>Test Number 3</font></td><td><font size=1>03/01/2010</font></td>';
echo '</tr>';
echo '<tr>';
echo '<td><font size=1>Test Number 4</font></td><td><font size=1>04/01/2010</font></td>';
echo '</tr>';
echo '<tr>';
echo '<td><font size=1>Test Number 5</font></td><td><font size=1>05/01/2010</font></td>';
echo '</tr>';
echo '<tr>';
echo '</TABLE>'."\n"."\n";

?>


Thanks!

Hi Can anyone solve this problem. Here is my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hide/Show Test!</title>
<style>
.myclass1 {
background-color:#CCCCCC;
display:block;
}
.myclass2 {
display:none;
}
</style>
</head>

<body>
<script>
function hideNshow(){
var e1=document.getElementById('A1C1_1');
if(e1.className=="myclass1")
{
e1.className="myclass2";
}
else
{
e1.className="myclass1";
}
e1=document.getElementById('A1C1_2');
if(e1.className=="myclass1")
{
e1.className="myclass2";
}
else
{
e1.className="myclass1";
}
}
</script>
<!-- <input type="button" name="myBtn" value="Click Me!" onclick=" hideNshow();"/>-->

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onclick=" hideNshow();">Row1/Cell1</a></td>
<td >Row1/Cell2</td>
<td>Row1/Cell3</td>
</tr>
<tr id="A1C1_1" class="myclass2">
<td>Row2/Cell1</td>
<td>Row2/Cell2</td>
<td>Row2/Cell3</td>
</tr>
<tr id="A1C1_2" class="myclass2">
<td>Row2/Cell1</td>
<td>Row2/Cell2</td>
<td>Row2/Cell3</td>
</tr>

<tr>
<td>Row3/Cell1</td>
<td>Row3/Cell2</td>
<td>Row3/Cell3</td>
</tr>
<tr>
<td>Row4/Cell1</td>
<td>Row4/Cell2</td>
<td>Row4/Cell3</td>
</tr>
<tr>
<td>Row5/Cell1</td>
<td>Row5/Cell2</td>
<td>Row5/Cell3</td>
</tr>
</table>
</body>
</html>

It is working fine in IE. When I click the link It displays the hidden rows and hides when I click the link agian. But in Firefox it is giving error. It is adding empty rows. How to prevent that. Thanks in advance.

Hi,
This request is probably pretty simple for the savvy HTML developer, but I'm new and I can't figure it out. If anyone can help it would be greatly appreciated...
I need to create a table that looks like the one in my attachment

This is what I have so far...

<table bordercolor="#6b6b6b" border="1" cellspacing="0">
<tbody>
<tr><th rowspan="11"><a title="Clinical Practice Council" href="/sites/Nursing/Clinical%20Practice%20Council/Site%20Pages/Overview.aspx">Clinical Practice Council</a></th>
<td><a title="Clinic Standards and Practice Council" href="/sites/Nursing/Clinical%20Practice%20Council/Site%20Pages/Clinic%20Nursing%20Standards%20and%20Practice%20Council.aspx">Clinic Standards and Practice Council</a></td>
</tr>
<tr>
<td><a title="Falls Risk and Reduction Committee" href="/sites/Nursing/Clinical%20Practice%20Council/Site%20Pages/Falls%20Risk%20and%20Reduction%20Committee.aspx">Falls Risk and Reduction Committee</a></td>
</tr>
<tr>
<td><a title="ICE Committee" href="/sites/Nursing/Clinical%20Practice%20Council/Site%20Pages/ICE%20Committee.aspx">ICE Committee </a></td>
</tr>
<tr>
<td><a title="Nursing Informatics Committee" href="/sites/Nursing/NursingInformatics/Site%20Pages/Nursing%20Informatics%20Committee.aspx">Nursing Informatics Committee</a></td>
</tr>
<tr>
<td><a title="NIRT Committee" href="/sites/Nursing/NursingInformatics/Site%20Pages/NIRT%20Committee.aspx">NIRT Committee</a></td>
</tr>
<tr>
<td><a title="Nursing Web Team Committee" href="/sites/Nursing/NursingInformatics/Site%20Pages/Nursing%20Web%20Team.aspx">Nursing Web Team Committee</a></td>
</tr>
<tr><td><a title="Nursing Pharmacy Committee" href="/sites/Nursing/Clinical%20Practice%20Council/Site%20Pages/Nursing%20Pharmacy%20Committee.aspx">Nursing Pharmacy Committee</a></td></tr>
<tr><td><a title="Nursing Product Evaluation Committee" href="/sites/Nursing/Clinical%20Practice%20Council/Site%20Pages/Nursing%20Product%20Evaluation%20Committee.aspx">Nursing Product Evaluation Committee</a></td></tr>
<tr><td><a title="Nursing Standards and Practice Council" href="/sites/Nursing/Clinical%20Practice%20Council/Site%20Pages/Nursing%20Standards%20and%20Practice%20Council.aspx">Nursing Standards and Practice Council</a></td></tr>
<tr><td><a title="Patient and Family Education Committee" href="/sites/Nursing/Clinical%20Practice%20Council/Site%20Pages/Patient%20and%20Family%20Education%20Committee.aspx">Patient and Family Education Committee</a> </td></tr>
<tr><td><a title="Skin Integrity Committee" href="/sites/Nursing/Clinical%20Practice%20Council/Site%20Pages/Skin%20Integrity%20Committee.aspx">Skin Integrity Committee</a> </td></tr>
<tr><th rowspan="3"><a title="Nursing Research Council" href="/sites/Nursing/Nursing%20Research%20Council/Site%20Pages/Overview.aspx">Nursing Research Council</a></th>
<td><a title="Evidence-Based Practice Working Group" href="/sites/Nursing/Nursing%20Research%20Council/Site%20Pages/Evidence-Based%20Practice%20Working%20Group.aspx">Evidence-Based Practice Working Group</a></td></tr>
<tr><td><a title="Research Education Working Group" href="/sites/Nursing/Nursing%20Research%20Council/Site%20Pages/Research%20Education%20Working%20Group.aspx">Research Education Working Group</a></td></tr>
<tr><td><a title="Research Working Group" href="/sites/Nursing/Nursing%20Research%20Council/Site%20Pages/Research%20Working%20Group.aspx">Research Working Group</a></td></tr>
<tr><th rowspan="1"><a title="Outcomes Management Council" href="/sites/Nursing/Outcomes%20Management/Site%20Pages/Overview.aspx">Outcomes Management Council</a></th>
<td></td></tr>
<tr><th rowspan="4"><a title="Professional Nursing Advancement Council" href="/sites/Nursing/Professional%20Development%20Council/Site%20Pages/Professional%20Nursing%20Advancement%20Council.aspx">Professional Nursing Advancement Council</a></th>
<td><a title="Nursing Education Council" href="/sites/Nursing/Outcomes%20Management/Site%20Pages/Divisional.aspx">Nursing Education Council</a></td></tr>
<tr><td><a title="Professional Nursing Advancement Council" href="/sites/Nursing/Professional%20Development%20Council/Site%20Pages/Professional%20Nursing%20Advancement%20Council.aspx">Professional Nursing Advancement Council</a></td></tr>
<tr><td><a title="ROAR" href="/sites/Nursing/Professional%20Development%20Council/Site%20Pages/ROAR%20Council.aspx">R.O.A.R Council</a></td></tr></tbody></table>


Thank you,
Ninel

I want to create 1 table such as:
one div A (panel) has posision left, with is fixed 200px;. One div B (panel) with Width full to right.

In the div B , i want to add two div tag(C,D). In which width is 50%

Please help me.

Thank you,