Replace Tables using css?

[crazy8]

Well once again I am back though it has been a long time. I just started a new job today which could possably be the start of my career or atleast some awsome experiance. Well here is the deal. One of my side jobs for the company is to work with a small team to make improvements to the corporate website. One part of the website is the ability for my employers to check info of sales reps located all over the globe and the progress of them. Well, by what I understand the reps put in their information on a regular bases and gets displayed in table form on the site. My new employer would like to get rid of the tables and perhaps replce the "table lines" with just regular looking lines possably using CSS. I hope this is understandable if not here is a smiple but crude example..

Table lines =======
Regular lines _______ ( horizontal and vertical to replace table)

Is this possable and if so how would I go about doing this. My skill with CSS is rather limited as of now which is why I ask for the help. Thank you all much.

NOTE: if a link is needed feel free to ask and I will supply it

sorry I just noticed I typed PHP in my title along with having this in the wrong part of the forum. Please accept my applogies and move it to the correct forum.

[jaketone]

If you can provide a better example of these tables it would help.

With css you can make the tables look 100x better and you wouldn't have to do away with the tables. When I have to use tables, I usually remove all borders and add 1-2 cell padding. I then give each table row a slightly different color. You could also style the borders so they aren't dotted. You could give them thick borders, or thin-dotted colored ones. For example, in css:


<style>
table {border: 8px dashed #990000;}
#gray tr {background-color: #c1c1c1;}
.odd {background-color: #999999;}
</style>


<table cellpadding="2" id="gray">
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr>
<tr class="odd">
<td>Test 3</td>
<td>Test 4</td>
</tr>
</table>



Or you could do away with tables and use div's. The idea is the same as far as styling it goes.


<style> table {border: 5px dashed #990000;}
#gray tr {background-color: #c1c1c1;}
#gray td {width: 300px;}
table#gray .odd {background-color: #999999;}
</style>
<table cellpadding="2" id="gray">
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>

<tr class="odd">
<td>Test 3</td>
<td>Test 4</td>
</tr>
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr class="odd">
<td>Test 3</td>
<td>Test 4</td>
</tr>

</table>


see the attached images for examples of the above code.

[crazy8]

Now I just want to make sure this will work. Im not doubting the code but just how i understand my employers site works and if the code will work for the purpose. Ok so people log onto the corporate site and enter in some information and that info gets submitted then after it gets submitted it automaticly gets added to the table on the page. Actually now that i Just looked it seems that the page is stored on a server here localy since the address is http://scooter/reps. anyway so would either of these still work or is there more I need to do? I guess what I am realy trying to figure out is if the data gets submitted by a red will the CSS code still automaticly add that data to the table or the div?

Thank You much for the help

[erisco]

This sounds like tabular data... so why remove the tables? You'd have to go with someone monospaced otherwise, and even then the effort in algorithms proves absolutely no benefit.

[crazy8]

Well im not realy sure about all of this I just know that my boss is more wanting to do it for esthetics. He doesnt like the blocky look of tables and would just prefer clean lines. Now im still not 100% sure if the data on the page gets put in by the employee or if its a for of "record keeping" automaticly done between the server and the netowork. The page with the tables keeps track of data like, what was the sale quote, how many days since last contacted, What parts the customer was being quoted for, How many days old the quote is (30, 60, 90). based from what Ive been hearing Im assuming this isnt going to be a quick few lines of code fix?

Thank you all for the help thus far. I realy appreciate it.

[erisco]

Why not just use CSS?

[crazy8]

Well if you look above at my original post you will see that my boss wants me to use CSS to do this. I just want to make sure that it will work with concideration to how everything works right now. Now by doing this would I just paste the code in place of the tables or is it more complex then that. My CSS skills are somewhat limited which is why Im asking all these questions.lol.

Thanks again

[scoutt]

I am not even sure what you are even talking about. If you see tables lines than just make the border zero and use css to make 1 line on each row or cell. then it will only show on line. an example would be really nice even if it is at a free site.

[erisco]

http://lkcs.lkdsb.net check out the tables on the homepage containing the updates. Single lines, you can hardly tell it is a table. All done through CSS; so is this what you were looking for?

[crazy8]

erisco...thats exactly what I am looking for could you give me some sample code how to do that kind of layout? I would like to know how to set up the boxes just the way you have.

Note: To all who have posted so far. I have been informed by a fellow employee who knows the system mug\ch better then I do. Turns out all the tables on the pages I am working on are being filled from a database backend if that helps the design process any. I do have a beter understanding what I knind of need to do thank you all for the help i greatly appreciate it. I would very much like to have some finished products by the time my boss gets back from england and your help is making that possable. Thank you again so much.