Solved

html for columns and background color

Posted on 2013-01-07
4
418 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
It’s the first day of March, the weather is starting to warm up and the excitement of the upcoming St. Patrick’s Day holiday can be felt throughout the world.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 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