PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Wed Sep 30, 2020 2:33 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 10 posts ] 
Author Message
PostPosted: Sun Apr 27, 2014 10:21 am 
Offline
Forum Regular
User avatar

Joined: Fri Sep 05, 2008 3:34 pm
Posts: 539
Location: Victoria, BC
This is one of my PSU review pages,

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


Top
 Profile  
 
PostPosted: Mon Apr 28, 2014 3:55 pm 
Offline
Site Administrator
User avatar

Joined: Wed Aug 25, 2004 7:54 pm
Posts: 13592
Location: New York, NY, US
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)


Top
 Profile  
 
PostPosted: Tue Apr 29, 2014 9:58 am 
Offline
Forum Regular
User avatar

Joined: Fri Sep 05, 2008 3:34 pm
Posts: 539
Location: Victoria, BC
got any code suggestions? Once I get a prototype working I can clone it ad nauseum


Top
 Profile  
 
PostPosted: Tue Apr 29, 2014 9:49 pm 
Offline
Site Administrator
User avatar

Joined: Wed Aug 25, 2004 7:54 pm
Posts: 13592
Location: New York, NY, US
I assume that your are talking about this table:
Syntax: [ Download ] [ Hide ]
        <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)


Top
 Profile  
 
PostPosted: Wed Apr 30, 2014 3:02 am 
Offline
DevNet Master
User avatar

Joined: Sun Feb 15, 2009 12:08 pm
Posts: 2794
Location: .za
the url below has a well styled example (imo), could be of some use / inspiration

_________________
“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


Top
 Profile  
 
PostPosted: Wed Apr 30, 2014 11:47 am 
Offline
Forum Regular
User avatar

Joined: Fri Sep 05, 2008 3:34 pm
Posts: 539
Location: Victoria, BC


Top
 Profile  
 
PostPosted: Wed Apr 30, 2014 6:05 pm 
Offline
Site Administrator
User avatar

Joined: Wed Aug 25, 2004 7:54 pm
Posts: 13592
Location: New York, NY, US
Do you have an example of what you? The modern, non-table way to do it would be to start with this:
Syntax: [ Download ] [ Hide ]
<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)


Top
 Profile  
 
PostPosted: Thu May 01, 2014 9:54 pm 
Offline
Forum Regular
User avatar

Joined: Fri Sep 05, 2008 3:34 pm
Posts: 539
Location: Victoria, BC
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?


Top
 Profile  
 
PostPosted: Fri May 02, 2014 8:30 am 
Offline
Site Administrator
User avatar

Joined: Wed Aug 25, 2004 7:54 pm
Posts: 13592
Location: New York, NY, US
If know the widths and heights of:

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

_________________
(#10850)


Top
 Profile  
 
PostPosted: Fri May 02, 2014 5:24 pm 
Offline
Forum Regular
User avatar

Joined: Fri Sep 05, 2008 3:34 pm
Posts: 539
Location: Victoria, BC
I cut and pasted the web version from Corsair's AX1500i which used very complicated styles

Syntax: [ Download ] [ Hide ]
<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>

 


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 10 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 8 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group