Databases
StackOverflow2013
Postsdbo
POCSS Table Elements
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Table Elements
    text
    copied!<p>I have inherited responsibility for some web page updates and have to work within the parameters of the existing design, but the coding used is all tables with lots of formatting in EVERY table cell. I am getting a headache just trying to work through it. I want to simplify by using styles, and need to have several different styles. Specifically, the table heading is all bold, centered and one font size, so it will get one style for the row. The first column needs to be bold and centered, and the fifth column is centered (but regular font weight). All the other columns are left aligned and regular weight. The rows are alternating between white and colored.</p> <p>So my question is can I style the rows in two styles to change the color, and then how would I style the 2 columns that need to be bold and/or centered, or do I need to style each cell to make this work?</p> <pre><code>&lt;tr style="height: 27.75pt"&gt; &lt;td style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d2eaf1; padding-bottom: 0in; border-left: #78c0d4 1pt solid; width: 41.4pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="55"&gt; &lt;p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center"&gt; &lt;strong&gt;&lt;span style="font-size: 10pt; color: black; font-family: 'Tahoma','sans-serif'"&gt;2&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt; &lt;/td&gt; &lt;td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 137.8pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="184"&gt; &lt;p style="margin: 0in 0in 0pt; line-height: normal"&gt; &lt;span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'"&gt;Grace Episcopal Church&lt;/span&gt;&lt;/p&gt; &lt;/td&gt; &lt;td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 72.45pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="97"&gt; &lt;p style="margin: 0in 0in 0pt; line-height: normal"&gt; &lt;span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'"&gt;Nyack&lt;/span&gt;&lt;/p&gt; &lt;/td&gt; &lt;td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 96.85pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="129"&gt; &lt;p style="margin: 0in 0in 0pt; line-height: normal"&gt; &lt;span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'"&gt;John Smith&lt;/span&gt;&lt;/p&gt; &lt;p style="margin: 0in 0in 0pt; line-height: normal"&gt; &lt;span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'"&gt;Tom Jones&amp;nbsp;&lt;/span&gt;&lt;/p&gt; &lt;/td&gt; &lt;td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 63pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="84"&gt; &lt;p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center"&gt; &lt;span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'"&gt;222-1234&lt;/span&gt;&lt;/p&gt; &lt;p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center"&gt; &lt;span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'"&gt;333-6789&lt;/span&gt;&lt;/p&gt; &lt;/td&gt; &lt;td style="border-right: #78c0d4 1pt solid; padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 147.4pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt" valign="top" width="197"&gt; &lt;p style="margin: 0in 0in 0pt; line-height: normal"&gt; &lt;a href="mailto:johnsmith@optonline.net"&gt;&lt;span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'"&gt;johnsmith@optonline.net&lt;/span&gt;&lt;/a&gt;&lt;/p&gt; &lt;p style="margin: 0in 0in 0pt; line-height: normal"&gt; &lt;a href="mailto:tomjones@att.net"&gt;&lt;u&gt;&lt;span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'"&gt;tomjones@att.net&amp;nbsp;&lt;/span&gt;&lt;/u&gt;&lt;/a&gt;&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; </code></pre> <p>I have cleaned up most of the code with internal style sheet, but have two remaining issues. The width of each column does not change using width style in each column class. Also, when I change the font size from 11pt to 12 pt it wraps text in two columns and thus throws off the intended design of the table. I'm sure I am missing a fairly easy tweak at this point.</p> <p>If it matters, I am using a site that has its own wysiwyg front end and I have limited access to source code - I can make some changes but not full control, but this is what I am stuck working with.</p> <pre><code>&lt;style type="text/css"&gt; .tablestyle { border: #78c0d4 1pt solid; cellpadding:none; cellspacing: none; border: medium none; border-collapse: collapse; width: 740; table-layout: fixed; } #heading { text-align:center; line-height:normal; font-size:26px; font-family: Arial, Helvetica, sans-serif; color:#252525; } .tablerowblue { border: #78c0d4 1pt solid; background: #d2eaf1; border-right-color: #f0f0f0; vertical-align:top; line-height: normal; font-size: 12px; color: black; font-family: Arial, Helvetica, sans-serif; } .tablerowwhite { border: #78c0d4 1pt solid; background: #ffffff; vertical-align:top; line-height: normal; font-size: 12px; color: black; font-family: Arial, Helvetica, sans-serif; } .tableheadbold { padding: 0 5px; border: #78c0d4 1pt solid; background: #4bacc6; border-right-color: #f0f0f0; vertical-align:top; text-align: center; font-size: 12px; color: black; font-family: Arial, Helvetica, sans-serif; font-weight:bold; } .col1 { width: 40; font-weight:bold; text-align:center; border: #78c0d4 1pt solid; } .col2 { width:80; border: #78c0d4 1pt solid; padding: 0px 5px; } .col3 { width:70; border: #78c0d4 1pt solid; padding: 0px 5px; } .col4 { width:170; border: #78c0d4 1pt solid; padding: 0px 5px; } .col5 { width:140; text-align:center; border: #78c0d4 1pt solid; padding: 0px 5px; } .col6 { width:190; color:black; border: #78c0d4 1pt solid; padding: 0px 5px; } &lt;/style&gt; &lt;div&gt; &amp;nbsp;&lt;/div&gt; &lt;p id="heading"&gt; Troops&lt;/p&gt; &lt;p&gt; &amp;nbsp;&lt;/p&gt; &lt;table class="tablestyle"&gt; &lt;tbody&gt; &lt;tr class="tableheadbold"&gt; &lt;td&gt; Troop&lt;/td&gt; &lt;td&gt; Chartered Organization&lt;br /&gt; Meeting Location&lt;/td&gt; &lt;td&gt; Town/City&lt;/td&gt; &lt;td&gt; Unit Leader&lt;br /&gt; Comm. Chair&lt;/td&gt; &lt;td&gt; Phone&lt;/td&gt; &lt;td&gt; E-Mail&lt;/td&gt; &lt;/tr&gt; &lt;tr class="tablerowwhite"&gt; &lt;td class="col1"&gt; 2&lt;/td&gt; &lt;td class="col2"&gt; Grace Episcopal Church&lt;/td&gt; &lt;td class="col3"&gt; Nyack&lt;/td&gt; &lt;td class="col4"&gt; Leader Name 1&lt;br /&gt; Leader Name 2&lt;/td&gt; &lt;td class="col5"&gt; 222-1234&lt;br /&gt; 333-6789&lt;/td&gt; &lt;td class="col6"&gt; &lt;a href="mailto:johnsmith@optonline.net"&gt;johnsmith@optonline.net&lt;/a&gt;&lt;br /&gt; &lt;a href="mailto:tomjones.net"&gt;tomjones.net&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="tablerowblue"&gt; &lt;td class="col1"&gt; 10&lt;/td&gt; &lt;td class="col2"&gt; Atonement Lutheran Church&lt;/td&gt; &lt;td class="col3"&gt; Stony Point&lt;/td&gt; &lt;td class="col4"&gt; Leader Name 1&lt;br /&gt; Leader Name 2&lt;/td&gt; &lt;td class="col5"&gt; 222-1234&lt;br /&gt; 333-6789&lt;/td&gt; &lt;td class="col6"&gt; &lt;a href="mailto:johnsmith@optonline.net"&gt;johnsmith@optonline.net&lt;/a&gt;&lt;br /&gt; &lt;a href="mailto:tomjones.net"&gt;tomjones.net&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload