SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 34 of 34
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post

    2.) It seems like I need wrapper tags around my Event data so I can style it and reference it more specifically (e.g. when I use PHP/MySQL to populate the values...
    If you want each line of the event data to have different styling then you will need to wrap each line in a suitable tag with a suitable class so that you can target each line. I was reading the address as basically one line so a span tag would seem appropriate and you can set it to display block and do away with the break. However if you think the event data is 3 lines of separate text then a p element may be more appropriate. It's a little subjective so opinions will vary.

    If you meant that you want the whole event block styled differently then as Jason mentioned the first item could be a th with a scope of row and then you can target the th inside of a tbody to apply the styling.

    e.g.
    Code:
    <table>
    		<thead>
    				<tr>
    						<th scope="col">Event</th>
    						<th scope="col">Cost</th>
    						<th scope="col">Attendees</th>
    						<th scope="col">Total</th>
    						<th scope="col">Add</th>
    				</tr>
    		</thead>
    		<tbody>
    				<tr>
    						<th scope="row"> Flower Show<br>
    								Mankato, MN<br>
    								Sept 24, 2011 </th>
    						<td>$20</td>
    						<td>3</td>
    						<td>$60</td>
    						<td>* Select *</td>
    				</tr>
    				<tr>
    						<th scope="row">Flower Show<br>
    								Willmar, MN<br>
    								Oct 1, 2011 </th>
    						<td>$20</td>
    						<td>1</td>
    						<td>$20</td>
    						<td>* Select *</td>
    				</tr>
    				<tr>
    						<th scope="row"> Banjo Jamboree<br>
    								Brainerd, MN<br>
    								Oct 8, 2011 </th>
    						<td>$50</td>
    						<td>4</td>
    						<td>$200</td>
    						<td>* Select *</td>
    				</tr>
    		</tbody>
    </table>
    3.) Do I just add Classes or ID's to the <TD> to style things?
    You can apply classes to the td if individual cells need to be styled differently or you could apply classes to the tr if you want the whole row of cells styled differently (e.g. tr.odd td{background:red}). If the table data is consistent then you probably don't need any extra classes as you can hit the th and the td separately to create some styling.

    4.) Not sure how to handle the *Select* buttons. Do they go inside the <TD>'s?
    Form controls just go inside the td like any other content. however the form element will need to surround the whole table and not be inside a cell (unless all form data was in one cell of course).

  2. #27
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    <TBODY> ???
    <tbody> is an optional tag within a table, and surrounds the rows that make up the bulk of the table data. You can have multiple <tbody> elements to split the table into sections.

    The full set of elements inside table is, and in this order only, <thead>, <tfoot> and <tbody>. You can only have one <thead> and <tfoot>, and the <tfoot> comes before the <tbody> even though it is displayed at the bottom. If you don't have any of these elements then a single <tbody> is assumed to encompass all rows of the table.

    Quote Originally Posted by DoubleDee View Post
    Again, not following your "scope" references?!
    When you have header cells, you should always mark them as <th scope="row"> or <th scope="col"> to show what part of the table they are headers for.

  3. #28
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B,

    So did my code look okay?

    BTW, I don't want this effect...

    Code:
    <th scope="row"> Flower Show<br>
    			Mankato, MN<br>
    			Sept 24, 2011 </th>

    If it looks okay, then I suppose it is just a matter of tweaking the styling, right?


    Debbie

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Paul O'B,

    So did my code look okay?
    The basics were ok but as the others mentioned you missed out important table attributes such as scope,tags such as thead and tbody, and using th to identify headers. They are all added to my code so that you can see how they should be applied.
    [code]
    BTW, I don't want this effect...

    Code:
    <th scope="row"> Flower Show<br>
    			Mankato, MN<br>
    			Sept 24, 2011 </th>
    I'm not sure what you mean by "this effect"?

    If you mean the bold styling then that's just the default when you use a th element and you can remove the bold just like normal css.

    e.g.
    table.className tbody th{font-weight:normal}

    You should still keep that element as a th and not a td because it is really the row header.

    That's the beauty of using tbody and thead tags because you can target each area separately if needed.

  5. #30
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You should still keep that element as a th and not a td because it is really the row header.
    Is it that crucial?

    I guess it is confusing because this doesn't seem like a "header"...
    Code:
    Flower Show
    Mankato, MN
    Sept 24, 2011

    Debbie

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It seemed like a header to me (more or less) but if you think items in the row are unrelated then it should be a td.

  7. #32
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    To me, "flower show" does feel like a header, the rest does not. It's why I suggested using rowspan on all the TD and putting a lone TD containing the address after. In that case I'd kick the scope as it applies on both axis... the next TH in the same position should be sufficient to indicate the 'break'.

    Code:
    	<tr>
    		<th>Flower Show</th>
    		<td rowspan="2">$20</td>
    		<td rowspan="2">3</td>
    		<td rowspan="2">$60</td>
    		<td rowspan="2">* Select *</td>
    	</tr><tr>
    		<td>
    			Mankato, MN<br>
    			Sept 24, 2011
    		</td>
    	</tr>

    You could also use colspan, which is less code, but feels 'semantically wrong' to me.

    Code:
    	<tr>
    		<th>Flower Show</th>
    		<td>$20</td>
    		<td>3</td>
    		<td>$60</td>
    		<td>* Select *</td>
    	</tr><tr>
    		<td colspan="5">
    			Mankato, MN<br>
    			Sept 24, 2011
    		</td>
    	</tr>
    That has the advantage though that really long addresses could fit under the data fields... So many different ways of handling it.

  8. #33
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It could be leaning towards a header if the data was categorised, and most likely if the location had several dates for example flower show having: Mankato and Willmar with the dates underneath as it would then group sub-event type under (event).
    Last edited by xhtmlcoder; Sep 25, 2011 at 04:08. Reason: I see Jason replied while editing.

  9. #34
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is an interesting conversation!


    Quote Originally Posted by deathshadow60 View Post
    To me, "flower show" does feel like a header, the rest does not.
    I would tend to agree with DeathShadow.

    Then again, you could argue that the "Event Name" + "Event Location" + "Event Date" uniquely make up the particular "Event" - think primary key - and that the rest of the data on said row maps back to that primary key. (Actually, I'll be using an "Event ID" on the back-end for that, but you follow me.)

    As such, "Event Name" + "Event Location" + "Event Date" would make a good representation for a "header" (i.e. <TH>) for that row.

    Hmmm...

    It's why I suggested using rowspan on all the TD and putting a lone TD containing the address after. In that case I'd kick the scope as it applies on both axis... the next TH in the same position should be sufficient to indicate the 'break'.

    Code:
    	<tr>
    		<th>Flower Show</th>
    		<td rowspan="2">$20</td>
    		<td rowspan="2">3</td>
    		<td rowspan="2">$60</td>
    		<td rowspan="2">* Select *</td>
    	</tr><tr>
    		<td>
    			Mankato, MN<br>
    			Sept 24, 2011
    		</td>
    	</tr>
    I like this, however, doing it this way seems to leave the "Event Address" left all alone on the next row. (With Paul's approach, it is clearly linked to the "Event Name".)

    We may have a "draw" here between Paul's and DeathShadow's ideas...



    Debbie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •