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">
</td>
</tr>
</table>
</div>