Table with Bullet-Points in Cells

Per the spec it simply served to reprint headers/footers on page break. If it did more than this, th/scope/headers would not be needed. People probablyy saw <thead> and assumed too much, so manufacturers went back to handle the misunderstanding. So, going back to properly code a table, even if you use thead you either need to do scope or headers, period.

As always, I am the Joint between Paul and Shadow. The key here is, before starting is semantic meaning.

Bulleted, single words… could this actually be a list you merely WISH to display in columns like a table? Or a full sentence you are breaking up into a list that you wish displayed in columns like a table… etc… the solution will depend on that.

  1. if (LIST){ forget using TD, code a s list, give explicit dimensions to the LI , use float and positioning. }
  2. if (SENTENCE) {use a P, and SPANs…have the SPANs display:list-item and use float and positioning.}
  3. if(TABLE){damn, that generated content would have been sweet here … but if the table is simple and only contains single words, and the desired column with can be FIXED

you could try:

table {padding:0 ; border-collapse:collapse}
tr{ display: block; overflow:hidden; padding-left:2%}
td{display: list-item; width:30%; list-style:disc inside;float:left; border:none;padding-right:3%;}

it all depends on the effect you are looking for AND the semantics from which YOU NEED to start.

GOOD POINT!!! That’s the other thing that I was wondering – is this tabular data? Are the rows all related and the columns all related as in a table, or is it just a list of words that you want to show in columns “just because”?

If there is nothing ‘related’ in the data that make the ‘columns’ related, then you should just be floating or using display:inline on a bunch of LI.

If they are related, as in you could put meaningful headers atop each row – like say… a list of tenses:


<table>
	<caption>Tense List</caption>
	<thead>
		<tr>
			<th>past</th>
			<th>present</th>
			<th>future</th>
		</tr>
	</thead><tbody>
		<tr>
			<td>played</td>
			<td>plays</td>
			<td>will play<br />(verb form)</td>
		</tr><tr>
			<td>spoke</td>
			<td>speaking</td>
			<td>speaks tomorrow<br />(adverb form)</td>
		</tr>
	</tbody>
</table>

That makes sense as a table, but if it’s just a flat list of words with no relationships on both axis, then it should be a list.

In that way it goes back to what I’m always saying about how without the content to put the choice in context, you cannot possibly choose the right tags.

I had bullets inside a table. The table listed various moving “packages” by a mover, and each package had a list (so, a LIST) of services each package contained.

So I just put a list inside the td. It depended on the screen reader whether the whole list was read out or not: for some reason NVDA wanted to treat the first “lines” of each td like it was one long sentence or something. Never figured out what was up with that. I could get the whole list in JAWS tho.

I completely agree with Crusty about using :before. Who the hell wants to hear “bullet bullet bullet” before each list item? You don’t in a real list. “Bullet” isn’t content, and CSS generated content isn’t considered content by screen readers (prolly a good thing, except when people use it when they should use content). Also when highlighting/copying text.

It’s pretty well supported, but it’s also pretty much equivalent to the headers attribute. The difference prolly being, if your table is complex then you might be writing out a lot more code with headers.

Darn it, I thought I’d come up with a really clever solution to DD’s original question, on the assumption that it was simply a grid presentation of a list of 18 words (and therefore not tabular), by just making it into a long list and floating the items. Unfortunately, IE8 (and possibly others) loses the bullet when you do that.

That said, if the grid is just for compact presentation and the words aren’t related in a tabular format, I would say that the most semantically correct solution would be to use one <ul>, with the <li>s set to float:left, widths to ensure correct wrapping, and then padding and a background-image to give the appearance of a bullet.

Does setting list-style-position:inside; fix that IE 8 problem there Stevie?

IE8 doesn’t usually lose the bullets on floated lists but ie6 and 7 do (I believe that it is because a floated element gets set to display:block by IE which stops it being a list-item any more - and no it won’t reset with display:list-item either.)

The problem may be that the bullet is sliding under the element next to it so Jasons suggestion above may work (but we’d need to see the code to be sure).

Ah, I see the problem - I hadn’t put a doctype in my test page so IE was going into quirks mode and not showing the bullets.

OK, so how about this:

ul li {
	float:left;
	width:15%;
	border:solid #888 1px;
	float:left;
	list-style-type:disc;
	list-style-position:inside;
	padding:0.2em;
	margin:1px;}

Perfectly semantic if it’s just a random list of words to be displayed in a grid 6×3, and the HTML is just a plain and simple <ul> filled with <li>s.

Ya said float twice :smiley:

Just wanted to make sure it was definitely floated in case the browser forgot :shifty:

Is that a new property value:) float:twice;

I was hoping CSS3 would introduce float: aimlessly.

Looks like we’ve scared Debbie away.

Sorry ralph, I twotted that. urp scuz me

No need to apogolize. I’m flatulated. :smiley:

Looks like I’ve created another monster (thread)…

Debbie

That’s always a good thing, the more different opinions you get and more facts people present, the better qualified you’ll be to make a decision on what’s the best approach for you.

Debate is good, different approaches are good. I love all the different ways people can come up with to solve the same problem as sooner or later EVERY one of us will see something “better” from someone else. Something I’ve been saying since I was ten – the day you think there’s nothing new to learn is the day the rest of the world leaves you behind.

That’s how we make the world a better place. No, I’m not a Darwinist…

I agree, but I just think it’s funny how I have a habit of asking a simple question like “What time is it” and I spark these passionate threads/debates on how to build a watch. :wink:

As long as I inspire you guys, all the better!

Debbie

P.S. Feel free to have the same “inspiration” with my Getting People to come (and STAY) at your website… thread. :wink: