conjuring up a better looking table

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
Vegan
Forum Regular
Posts: 574
Joined: Fri Sep 05, 2008 3:34 pm
Location: Victoria, BC
Contact:

conjuring up a better looking table

Post by Vegan »

This is one of my PSU review pages, http://hardcore-games.azurewebsites.net ... msr-a3.php

Anyway the PSU spec table leaves something to be desired at the best of the time.

I am somewhat familiar with borders etc, but this object is a tad more complex than I can figure out easily

I can box the whole table fine, but I wanted to have thin lines to segment the various cell but not all of them, they vary

the PSU table obviously used colspans etc so its nominally the way I want the table, I am working on style
Hardcore Games™ Legendary is the Only Way to Play™
My site is powered by LAMP
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: conjuring up a better looking table

Post by Christopher »

The simplest might be to put a table for the DC OUTPUTS within your table instead of using spans. Better, obviously, would be to float divs for all this.
(#10850)
User avatar
Vegan
Forum Regular
Posts: 574
Joined: Fri Sep 05, 2008 3:34 pm
Location: Victoria, BC
Contact:

Re: conjuring up a better looking table

Post by Vegan »

got any code suggestions? Once I get a prototype working I can clone it ad nauseum
Hardcore Games™ Legendary is the Only Way to Play™
My site is powered by LAMP
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: conjuring up a better looking table

Post by Christopher »

I assume that your are talking about this table:

Code: Select all

	<table style="width: 100%; border: 2px solid #000000;">
		<tr>
			<td class="centered"><strong>AC INPUT</strong></td>
			<td class="centered" colspan="6">115 V / 230 V - 50 / 60 Hz</td>
		</tr>
		<tr>
			<td class="centered" rowspan="2"><strong>DC OUTPUT</strong></td>
			<td class="centered">+3.3 V</td>
			<td class="centered">+5 V</td>
			<td class="centered">+12 V</td>
			<td class="centered">+12 V</td>
			<td class="centered">-12 V</td>
			<td class="centered">+5 VSB</td>
		</tr>
		<tr>
			<td class="centered">22 A</td>
			<td class="centered">25 A</td>
			<td class="centered">18 A</td>
			<td class="centered">18 A</td>
			<td class="centered">0.5 A</td>
			<td class="centered">2.5 A</td>
		</tr>
		<tr>
			<td class="centered" rowspan="1"><strong>Max Combined Watts</strong></td>
			<td class="centered" colspan="6">400 W</td>
		</tr>
	</table>
Perhaps one of our HTML5 gurus can modernize this for you.
(#10850)
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: conjuring up a better looking table

Post by social_experiment »

the url below has a well styled example (imo), could be of some use / inspiration
http://www.codeproject.com/Tips/262546/ ... practices#
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Vegan
Forum Regular
Posts: 574
Joined: Fri Sep 05, 2008 3:34 pm
Location: Victoria, BC
Contact:

Re: conjuring up a better looking table

Post by Vegan »

Christopher wrote:I assume that your are talking about this table:

Code: Select all

	<table style="width: 100%; border: 2px solid #000000;">
		<tr>
			<td class="centered"><strong>AC INPUT</strong></td>
			<td class="centered" colspan="6">115 V / 230 V - 50 / 60 Hz</td>
		</tr>
		<tr>
			<td class="centered" rowspan="2"><strong>DC OUTPUT</strong></td>
			<td class="centered">+3.3 V</td>
			<td class="centered">+5 V</td>
			<td class="centered">+12 V</td>
			<td class="centered">+12 V</td>
			<td class="centered">-12 V</td>
			<td class="centered">+5 VSB</td>
		</tr>
		<tr>
			<td class="centered">22 A</td>
			<td class="centered">25 A</td>
			<td class="centered">18 A</td>
			<td class="centered">18 A</td>
			<td class="centered">0.5 A</td>
			<td class="centered">2.5 A</td>
		</tr>
		<tr>
			<td class="centered" rowspan="1"><strong>Max Combined Watts</strong></td>
			<td class="centered" colspan="6">400 W</td>
		</tr>
	</table>
Perhaps one of our HTML5 gurus can modernize this for you.
That is the table now, it has a box around the whole table but I wanted to segment it up a tad, more like the box labels etc which look like they were done with Illustrator and Photoshop
Hardcore Games™ Legendary is the Only Way to Play™
My site is powered by LAMP
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: conjuring up a better looking table

Post by Christopher »

Do you have an example of what you? The modern, non-table way to do it would be to start with this:

Code: Select all

<div>
	<div>
		AC INPUT
	</div>
	<div>
		115 V / 230 V - 50 / 60 Hz
	</div>
	<div>
		DC OUTPUT
	</div>
	<div>
		+3.3 V<br>
		22 A
	</div>
	<div>
		+5 V<br>
		25 A
	</div>
	<div>
		+12 V<br>
		18 A
	</div>
	<div>
		+12 V<br>
		18 A
	</div>
	<div>
		-12 V<br>
		0.5 A
	</div>
	<div>
		+5 VSB<br>
		2.5 A
	</div>
	<div>
		Max Combined Watts
	</div>
	<div>
		400 W
	</div>
</div>
And start applying styles until it looks like you want. You may need to add a few additional div's to wrap sub-block. But it is mainly a matter of setting widths and heights, and floating div's in the same row.
(#10850)
User avatar
Vegan
Forum Regular
Posts: 574
Joined: Fri Sep 05, 2008 3:34 pm
Location: Victoria, BC
Contact:

Re: conjuring up a better looking table

Post by Vegan »

The way the table is right now, I wanted a box around the voltages to isolate them
then I wanted to box the voltage/current into smaller boxes

then I can make the whole think smaller and more like a print label with some fixed size style

not sure if the div way or the table way or some hybrid way it the path to glory?
Hardcore Games™ Legendary is the Only Way to Play™
My site is powered by LAMP
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: conjuring up a better looking table

Post by Christopher »

If know the widths and heights of:

- the whole thing
- the labels
- box around the voltages
- the smaller boxes with voltage/current
(#10850)
User avatar
Vegan
Forum Regular
Posts: 574
Joined: Fri Sep 05, 2008 3:34 pm
Location: Victoria, BC
Contact:

Re: conjuring up a better looking table

Post by Vegan »

I cut and pasted the web version from Corsair's AX1500i which used very complicated styles

Code: Select all

<div>
	<table id="psu-tech-specs" align="center" style="margin: 0px; padding: 0px; border-collapse: collapse; border-spacing: 0px; color: rgb(0, 0, 0); font-family: 'Open Sans', arial, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);" width="625px">
		<tbody style="margin: 0px; padding: 0px;">
			<tr style="margin: 0px; padding: 0px;">
				<td align="center" class="psu-tech-spec-title" colspan="7" style="margin: 0px; padding: 10px; background-color: rgb(244, 244, 244); font-size: 13px; border: 1px solid rgb(204, 204, 204);">
				Corsair AX1500i Digital ATX Power Supply</td>
			</tr>
			<tr style="margin: 0px; padding: 0px;">
				<td style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" width="169">
				AC Input Rating</td>
				<td align="center" colspan="6" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				DC Output Rating</td>
			</tr>
			<tr style="margin: 0px; padding: 0px;">
				<td style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);">
				AC Input: 100V - 240V</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				DC Output</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				+3.3V</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				+5V</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				+12V</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				-12V</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				+5Vsb</td>
			</tr>
			<tr style="margin: 0px; padding: 0px;">
				<td style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);">
				Current: 15A</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				Max Load</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				30A</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				30A</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				125A</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				0.8A</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				3.5A</td>
			</tr>
			<tr style="margin: 0px; padding: 0px;">
				<td rowspan="2" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				Frequency: 50Hz - 60Hz</td>
				<td align="center" rowspan="3" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				Maximum Combined Wattage</td>
				<td align="center" colspan="2" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				180W</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				1500W</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				9.6W</td>
				<td align="center" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				17.5W</td>
			</tr>
			<tr style="margin: 0px; padding: 0px;">
				<td align="center" colspan="5" rowspan="2" style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				Total Power: 1500W</td>
			</tr>
			<tr style="margin: 0px; padding: 0px;">
				<td style="margin: 0px; padding: 10px; font-size: 13px; border: 1px solid rgb(204, 204, 204);" valign="middle">
				&nbsp;</td>
			</tr>
	</table>
	</div>

Hardcore Games™ Legendary is the Only Way to Play™
My site is powered by LAMP
Post Reply