AV1611 Posted February 27, 2006 Share Posted February 27, 2006 I always wanted to create an "SPREADSHEET" looking display from queries returns. I created this using HTML/PHP/CSS. It does not contain any JS.A. I would like to know about the general asthetics of the displayB. I would like any suggesitons for improvements.Please keep in mind, this is created dynamically, as the post below shows.Things I don't know how to do (yet) would be:How to center text in an <input type="text"> cellUser Resizable CellsUser Resizable TableAbility to select specific cellsand the big one:It would be really cool if the ENTIRE contents of the cell would display in a popup/balloon when you hover (or perhaps click) over a cell.Here is the link:[a href=\"http://baptistrevival.com:8081/test/divtable.php\" target=\"_blank\"]http://baptistrevival.com:8081/test/divtable.php[/a]Here is the code:[code]<style>table, tr, th, td {border-collapse: collapse;text-align:center;margin:0;padding:0;width: 100%;font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;}INPUT{ MARGIN:0PX; PADDING:0PX; font-family:TrebuchetMS; font-size:10pt; font-weight:bold; background-color:#ffffff; border-color:#C0C0C0; border-style:RIDGE; border-width:1px;}INPUT.label{ background-color:#e0e0e0; }body { scrollbar-base-color: #FFFFFF; scrollbar-arrow-color: #808080; scrollbar-darkshadow-color: #c0c0c0; scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #c0c0c0; scrollbar-shadow-color: #c0c0c0; scrollbar-3dlight-color: #ffffff; background-color: #ffffff;}</style><body><?function col2str($a) { return ($a-->26?chr(($a/26+25)%26+ord('A')):'').chr($a%26+ord('A')); }$i=1;$n=1;?><div style="border : solid 1px #000000; background : #c0c0c0; color : #ff0000; padding : 1px; width : 770px; height : 400px; overflow : auto; "><table WIDTH="100%"><tr><TD><br/></TD><?phpwhile($i<9){ $colname = col2str($i); echo '<TD WIDTH="10"><INPUT class="label" SIZE="10" TYPE="TEXT" VALUE=" '.$colname.'" readonly></TD>'; $i++; }?></TR><?php$user="";$host="localhost";$password="";$database = "bible";mysql_connect($host,$user,$password);mysql_select_db($database);$result = mysql_query("SELECT * FROM Bible where book like 'Genesis' order by `key`");while ($row=mysql_fetch_array($result)){ echo '<tr>'; echo '<TD WIDTH="10"><INPUT SIZE="3" TYPE="TEXT" VALUE="'.$n.'" class="label" readonly></TD>'; echo '<TD WIDTH="10"><INPUT SIZE="10" TYPE="TEXT" VALUE="'.$row[0].'"></TD>'; echo '<TD WIDTH="10"><INPUT SIZE="10" TYPE="TEXT" VALUE="'.$row[1].'"></TD>'; echo '<TD WIDTH="10"><INPUT SIZE="10" TYPE="TEXT" VALUE="'.$row[2].'"></TD>'; echo '<TD WIDTH="10"><INPUT SIZE="10" TYPE="TEXT" VALUE="'.$row[3].'"></TD>'; echo '<TD WIDTH="10"><INPUT SIZE="10" TYPE="TEXT" VALUE="'.$row[4].'"></TD>'; echo '<TD WIDTH="10"><INPUT SIZE="10" TYPE="TEXT" VALUE="'.$row[5].'"></TD>'; echo '<TD WIDTH="10"><INPUT SIZE="10" TYPE="TEXT" VALUE="'.$row[6].'"></TD>'; echo '<TD WIDTH="10"><INPUT SIZE="10" TYPE="TEXT" VALUE="'.$row[7].'"></TD>'; echo '</tr>'; $n++; }?></table></div></body>[/code] Quote Link to comment Share on other sites More sharing options...
Javizy Posted February 27, 2006 Share Posted February 27, 2006 Looks okay, maybe you could use some graphics to give it the look and feel of a program like Excel.You could use some js to allow resizing of cells and other features like that. Quote Link to comment Share on other sites More sharing options...
AV1611 Posted February 27, 2006 Author Share Posted February 27, 2006 I don't know JS at all...If someone could give me a hint of how to make the cells resizable... that would be Great![!--quoteo(post=349815:date=Feb 27 2006, 08:29 AM:name=Javizy)--][div class=\'quotetop\']QUOTE(Javizy @ Feb 27 2006, 08:29 AM) [snapback]349815[/snapback][/div][div class=\'quotemain\'][!--quotec--]Looks okay, maybe you could use some graphics to give it the look and feel of a program like Excel.You could use some js to allow resizing of cells and other features like that.[/quote] Quote Link to comment Share on other sites More sharing options...
steviewdr Posted February 27, 2006 Share Posted February 27, 2006 Hi,Well all it seems that you have done is to output some data in table format with css - Nothing major new to me.If you are going to make a spreadsheet online application - then you are going to HAVE to use javascript. And for which there are many javascript spreadsheets out there you could easily use and integrate with php etc.For example a search in google for "javascript spreadsheet". The first result:[a href=\"http://www.blueshoes.org/en/javascript/spreadsheet/\" target=\"_blank\"]http://www.blueshoes.org/en/javascript/spreadsheet/[/a]Cells can be resized etc.Best of Luck,-steveP.S. if you want to know how to resize cells in javascript - look at the above one and study their code. Quote Link to comment Share on other sites More sharing options...
AV1611 Posted February 27, 2006 Author Share Posted February 27, 2006 Thanks,This is as much a Learning exercise as anything. I'll take your suggestion and pick their example apart.[!--quoteo(post=349828:date=Feb 27 2006, 09:22 AM:name=steviewdr)--][div class=\'quotetop\']QUOTE(steviewdr @ Feb 27 2006, 09:22 AM) [snapback]349828[/snapback][/div][div class=\'quotemain\'][!--quotec--]Hi,Well all it seems that you have done is to output some data in table format with css - Nothing major new to me.If you are going to make a spreadsheet online application - then you are going to HAVE to use javascript. And for which there are many javascript spreadsheets out there you could easily use and integrate with php etc.For example a search in google for "javascript spreadsheet". The first result:[a href=\"http://www.blueshoes.org/en/javascript/spreadsheet/\" target=\"_blank\"]http://www.blueshoes.org/en/javascript/spreadsheet/[/a]Cells can be resized etc.Best of Luck,-steveP.S. if you want to know how to resize cells in javascript - look at the above one and study their code.[/quote] Quote Link to comment Share on other sites More sharing options...
moberemk Posted February 27, 2006 Share Posted February 27, 2006 Why did you put the contents of the ENTIRE BIBLE on a demonstration page? It takes an eternity and a half to load! Put a limit statement in your query or something! Quote Link to comment Share on other sites More sharing options...
AV1611 Posted February 28, 2006 Author Share Posted February 28, 2006 I'm sorry, I didn't realize I didn't add the limit ... I was going to...[!--quoteo(post=350029:date=Feb 27 2006, 05:42 PM:name=moberemk)--][div class=\'quotetop\']QUOTE(moberemk @ Feb 27 2006, 05:42 PM) [snapback]350029[/snapback][/div][div class=\'quotemain\'][!--quotec--]Why did you put the contents of the ENTIRE BIBLE on a demonstration page? It takes an eternity and a half to load! Put a limit statement in your query or something![/quote] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.