Solved

html for columns and background color

Posted on 2013-01-07
4
410 Views
Last Modified: 2013-01-16
what would be the html tag(s) to create a columned document with each column having a different color background?  The columns are not even in width with the first column being about 2/3 and the second column being 1/3.  Please give an example of how it would be used for inclusion in MS Access.

Also, what tags would be used to set the background colors and where do they appear in the html sequence?
0
Comment
Question by:uad
4 Comments
 
LVL 14

Assisted Solution

by:shahzoor
shahzoor earned 150 total points
ID: 38751110
<table border="0" width="69%">
	<tr>
		<td width="169" bgcolor="#0000FF">&nbsp;</td>
		<td bgcolor="#008000">&nbsp;</td>
		<td width="274" bgcolor="#FF0000">&nbsp;</td>
	</tr>
</table>

Open in new window


 bgcolor="#0000FF" indicates the background color
td width="169" indicates the size of column
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 350 total points
ID: 38751142
A basic table can look something like below.  The tr tag represents a row and each td is a column.  

<table width="400">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Open in new window


What you want to do is add your data to each column, repeat the rows, and give each column a class you can style with whatever color you want.  You can add column widths or padding to the table cells through your css styles.  As far as width, you can set that too or if left alone, the table widths will default to the same or width of the widest column without the entire table going wider then your specified.

I would take this in steps. First play with tables using hard coded fake data.  http://www.w3schools.com/html/html_tables.asp

Next play with adding classes to your tables and using css http://www.w3schools.com/css/default.asp

Next, you just need to use a server side language of your choice asp/php/? to talk with your database and generate thml.  If you have 20 rows of data in your database, the below code would produce 21 table rows including the header.
A working sample would be below.

<style>
.col_1 {background-color:red;}
.col_2 {background-color:blue;}
.col_3 {background-color:green;}
</style>

<table width="400">
  <tr>
    <td class="col_1">heading1</td>
    <td class="col_2">heading2</td>
    <td class="col_3">heading3</td>

  </tr>
<%
' loop through your data
do until rs.eof
%>
  <tr>
    <td class="col_1"><%=rs("data1")%></td>
    <td class="col_2"><%=rs("data2")%></td>
    <td class="col_3"><%=rs("data3")%></td>

  </tr>
<%
rs.movenext
loop
%>
</table>

Open in new window

working sample
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38752032
You can use colgroup to target columns, so you don't need a lot of detailed CSS with id or class specifications.  This article covers the column options you can use.


Cd&
0
 

Author Comment

by:uad
ID: 38756055
I am testing the various ways presented and will need a few days to fully see which works best in Access

Question based on the above - does bgcolor (e.g. #CCFFCC) for a specific column remain until bgcolor is resent to say to another color (e.g. #FFFFFF)?  Also, if two columns have different colors, does the bgcolor need to be repeated for each row tag?
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question