Help Marking-Up/Styling Event Choices

Yes, That would be a good idea Debbie :slight_smile: I’m sure you can come up with something quite good now.

Since I am asking for help, it looks like I am trying to learn… :rolleyes:

There is plenty of example code options already in this thread that should enable you to markup and style the relatively straight forward layout you have above :slight_smile:

Why not post your attempt at marking up and styling the above layout first :wink:

Because I was late for bed last night, and I hadn’t a clue.

I dunno… if I tried tonight, maybe I would just use <SPAN> or <DIV> or <P> as wrappers around each data element in a row and then add padding to create space. (But that seems pretty crude.)

I’m sure that there is an easy solution, and knowing Paul O’, with probably about 20% less code… :smiley:

Debbie

Well, here is my first, crude stab at things…


<body>
	<table border="1">
		<tr>
			<th>Event</th>
			<th>Cost</th>
			<th>Attendees</th>
			<th>Total</th>
			<th></th>
		</tr>
		<tr>
			<td>
				Flower Show<br>
				Mankato, MN<br>
				Sept 24, 2011
			</td>
			<td>$20</td>
			<td>3</td>
			<td>$60</td>
			<td>* Select *</td>
		</tr>
		<tr>
			<td>
				Flower Show<br>
				Willmar, MN<br>
				Oct 1, 2011
			</td>
			<td>$20</td>
			<td>1</td>
			<td>$20</td>
			<td>* Select *</td>
		</tr>
		<tr>
			<td>
				Banjo Jamboree<br>
				Brainerd, MN<br>
				Oct 8, 2011
			</td>
			<td>$50</td>
			<td>4</td>
			<td>$200</td>
			<td>* Select *</td>
		</tr>
	</table>
</body>

Some Comments/Questions:

1.) I have to go back and re-read what DeathShadow was saying and see if I can follow him?!

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…

3.) Do I just add Classes or ID’s to the <TD> to style things?

4.) Not sure how to handle the Select buttons. Do they go inside the <TD>'s?

Debbie

I don’t follow you…

inside TBODY

<TBODY> ???

each TR would probably be TH scope=“row”, TD, TD, TD…

Again, not following your “scope” references?!

I’d consider moving the secondary lines to their own TR/TD, possibly with rowspan=“2” on all the actual data column TD’s since structurally the event should be the heading…

You lost me.

that or put heading tags inside the TD though honestly, if you need headings it’s no longer table data (just as if you need headings it’s no longer a list item).

You lost me.

And why do “headings” make it not a table?!

All tables have headings…

Debbie

ok, but since many posters looking for a free coding service (which I am not) come in forums like this “asking for help” without first posting their attempt I wasn’t sure of your intentions and hence my question and request for you to post your attempt :wink:

Since you seem to be changing what you want as you go along in this thread, and now clearly have tabular data, fwiw I would use a table as well.

Good luck

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.


<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).

<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.

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.

Paul O’B,

So did my code look okay?

BTW, I don’t want this effect…


<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

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.


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


<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.

Is it that crucial?

I guess it is confusing because this doesn’t seem like a “header”…


Flower Show
Mankato, MN
Sept 24, 2011

Debbie

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.

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’.


	<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.


	<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.

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).

This is an interesting conversation!

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’.


	<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