Page 1 of 1

conjuring up a better looking table

Posted: Sun Apr 27, 2014 10:21 am
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

Re: conjuring up a better looking table

Posted: Mon Apr 28, 2014 3:55 pm
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.

Re: conjuring up a better looking table

Posted: Tue Apr 29, 2014 9:58 am
by Vegan
got any code suggestions? Once I get a prototype working I can clone it ad nauseum

Re: conjuring up a better looking table

Posted: Tue Apr 29, 2014 9:49 pm
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.

Re: conjuring up a better looking table

Posted: Wed Apr 30, 2014 3:02 am
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#

Re: conjuring up a better looking table

Posted: Wed Apr 30, 2014 11:47 am
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

Re: conjuring up a better looking table

Posted: Wed Apr 30, 2014 6:05 pm
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.

Re: conjuring up a better looking table

Posted: Thu May 01, 2014 9:54 pm
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?

Re: conjuring up a better looking table

Posted: Fri May 02, 2014 8:30 am
by Christopher
If know the widths and heights of:

- the whole thing
- the labels
- box around the voltages
- the smaller boxes with voltage/current

Re: conjuring up a better looking table

Posted: Fri May 02, 2014 5:24 pm
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>