I am creating an HTML table that is 3 columns by 6 rows.
Each cell contains a word.
How can I insert a Bullet Point before each work in my HTML table using CSS?
Thanks,
Debbie
| SitePoint Sponsor |
I am creating an HTML table that is 3 columns by 6 rows.
Each cell contains a word.
How can I insert a Bullet Point before each work in my HTML table using CSS?
Thanks,
Debbie
Maybe wrap the word in a <p> and use left padding and a background image, or use p:before.
It depends on your structure but you could also do something like thi.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> p { display:list-item; list-style:disc inside; padding:0 0 0 14px; margin:0; } </style> </head> <body> <table> <tr> <td><p>test</p></td> <td><p>test</p></td> <td><p>test</p></td> <td><p>test</p></td> </tr> </table> </body> </html>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
As a single word I would advise AGAINST using P -- a single word is NOT a paragraph... Use a span instead. Otherwise, Paul's answer makes sense...
Though honestly, even though it would take a few extra bytes and a extra handshake, I'd be tempted to use a background-image and apply it to the TD.
Which also deals with how most browsers don't use the same size/appearance bullets, and would let you get a little more fancy with their appearance. It would also be cached across pages as opposed to the SPAN or P inside the markup.Code:td { padding-left:24px; /* image width plus any desired padding */ background:url(images/bullet.png) center left no-repeat; }
Shame we can't rely on generated content yet -- a td:before { content:"·"; } would also be a nice solution.
<p>Bullpoop.</p>Originally Posted by deathshadow60
You know we disagree here
It depends on the context but a single word can be a paragraph. The shortest sentence can be one word.
A paragraph is defined as one or more sentences expressing a single train of thought so the one word can be a paragraph.shortest possible complete sentence is something like "Go!"
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Context being the important part -- you already have a semantic tag saying that it's table data, the extra semantics applied by the paragraph tag is redundant/pointless and possibly damaging to accessibility.
Semantics isn't just about slapping P around anything that happens to be CDATA.
I know this will come across as pedantic, but I'm even more liberal in my definition of a 'paragraph'. If you go back to the Greek origins of the word, the 'graph' part applies not only to writing but to drawing, painting etc. Para means 'along side' or 'beside'. So I'm happy to wrap an image in <p> tags with no associated text, as it's still consistent with 'something drawn or written beside (something else)'. I know that's not actually the reason why the word ‘paragraph’ came into English, and I'm sure that's not what people had in mind when they established the <p> element, but it works for me (when I'm trying to justify non-standard uses of that element).
What problems might it cause?
Well it often breaks column and row scope in screen readers if you don't explicitly state them. I've had that more than once where using block level containers inside TD often "lose the association" to their parent TH on the row or in relation to TH inside the THEAD. (assuming you are even building the table PROPERLY). It can be fixed by stating either "headers=" on the TD or "scope=" on the associated TH, but why use extra markup if you don't have to?
But again, with most developers not even knowing that CAPTION, TBODY, THEAD, TFOOT, COLGROUP, COL or TH even exist (much less Mozilla still not even supporting COL properly some thirteen years after the bugzilla entry was made), much less the concept of the SCOPE, AXIS or HEADERS attributes it's probably why so many people think that tables are always broken in screen readers-- when in general they're just not using them right.
See how I feel the need to backhand someone every time I see:
doing the job ofCode:<td colspan="8" class="header" align="center"><b><font size="+2">Table Title</font></b></td>
AS a rule of thumb I've taken to saying that if you end up using numbered heading tags, paragraphs or DIV inside your TD, (or LI) it ceases to be table data (or list items) with VERY rare exceptionsCode:<caption>Table Title</caption>
Thanks Jason. Interesting info (the whole post) and duly noted.AXIS is a new one to me, so I'll check it out.
How about CHAR, CHAROFF, RULES, and FRAME?Thanks Jason. Interesting info (the whole post) and duly noted.
The latter two of those along with "border" surprisingly NOT deprecated on TABLE. The FRAME attribute is often handy for dealing with webkit's idiotic handling of CAPTION when cellspacing is involved.
No, I wasn't aware of those either … and something makes me feel kinda glad of that, too.
I used "Insert Symbol" in OpenOffice Writer to create square bullets in my text document.
Next I cut and pasted my *bulleted words* into my IDE and the bullets seemed to carry-over like any other character. So, problem temporarily solved.
Couldn't you just use some ASCII code or whatever to tell your browser to render a bullet point?
Here is a snippet of my code...
Code HTML4Strict:<table id="myTable" cellspacing="15" summary="Some table..."> <tr> <td>▪ Friendly</td> <td>▪ Helpful</td> <td>▪ Energetic</td>
Debbie
That's an html solution - not css
Use •
Code:<td>• Friendly</td>
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Incorrect. None. Infact it might be better since the p is the jump paragraph hotkey. So instead of dealing with the table, they can read the words.
None, other than the table itself.
A screen reader is not smart. It will only guess so much before it says "Heck I don't know my header, here is my value." Thus why scope or headers are NEEDED not just bloat code.
They ARE smart enough to realize a TH inside THEAD should have scope=col and that TH inside TBODY should have scope=row by default... which makes perfect sense. Unfortunately that breaks if you put block level containers inside the TD.... necessitating the extra elements.
Just part of why I'd prefer an inline-level element that adds no extra semantic meaning to the content -- as applying the wrong semantics can be worse than having none at all.
You know, thinking on this, I probably would go with:
Doesn't work in IE7 or earlier -- oh well. Oh, and that's unicode, for utf-8 you'd want to swap 2022 for E280A2 I think...Code:td:before { content:"\2022"; }
Off Topic:
I just love how :before actually puts it INSIDE the element... that makes sense.
Normally I dislike the mere idea of generated content, but those bullets are presentational in nature so...
Sorry Jason, still incorrect. You need to provide proof. All the stuff I am seeing does not say what are saying. If I understand you correctly, you are sayingis the same asCode:<table> <tr> <th>heading</th>
Looking at the spec, it says a value must be given, and there is no default value. So that would lead me to say it may be announced as a header, but not to what, which is the opposite what you said. I would say some screen readers might be able to grab the header by force (hotkeys), but would not rely on that method.Code:<table> <tr> <th scope='col'></th>
Maybe read Tables with JAWS and MAGic and Table Reading Commands for JAWS and Table examples
No Ryan, I'm saying that:
Is generally treated the same asCode:<table> <thead> <tr> <td></td> <th>column 1</th> <th>column 2</th> </tr> </thead><tbody> <tr> <th>row 1</th> <td>data 1</td> <td>data 2</td> </tr> </tbody> </table>
by screen readers like Jaws, webbIE, etc... Which last time I checked did work. It makes sense for them to be treated that way since pretty much THEAD is going to be the headings for the body area -- that's what THEAD and TBODY are FOR. The associations are retained. Simply adding a DIV inside that row TH breaks the association. If I remember right Jaws also broke TBODY ones if you had more than one TH... makes sense since it makes no sense for multiple TH per row! I think it also doesn't form that association if you don't have a THEAD and explicit TBODY. (the assumed automatic one most browsers don't usually even bother making in their DOM)Code:<table> <tr> <td></td> <th scope="col">column 1</th> <th scope="col">column 2</th> </tr><tr> <th scope="row">row 1</th> <td>data 1</td> <td>data 2</td> </tr> </table>
THEAD and TBODY, check 'em out. NOT what they are actually for by the spec, but it is how they are often treated. (while TFOOT languishes as pointless in most cases)
<THEAD> has no implicit value as you suggest. All Thead does is if you put headers in, and your table hits a page break, the headers are reprinted.
Therefore scope is not applied by default. A DIV breaks association because THEAD, TBODY and TFOOT are basically a div (as quoted above)."This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data." Tables in HTML documents
... uhm multi-level/layer tables.If I remember right Jaws also broke TBODY ones if you had more than one TH... makes sense since it makes no sense for multiple TH per row!)
Guessing you are seeing this because thead,body and foot are rarely used and when they are it is usually incorrectly. So screen reader manufacturers script it so it reads correctly. Screen readers have to fix code more than people think to make it read correctly.THEAD and TBODY, check 'em out. NOT what they are actually for by the spec, but it is how they are often treated
Take a minute and think, if thead really did what you are thinking I bet money various people would say use thead to solve the issue(s), versus scope or headers/id. Seeing that nobody doesn't should show that thead is just for layout.
That's actually what I've been SAYING. I'm not saying that's what it does by the spec -- I'm saying it makes sense and it's how some UA's handle it.
Though I don't know if I'd call it "fixing code" so much as behaving to the original intent of HTML. Remember, the reason HTML is so vague on appearance of tags (in fact you'll be hard pressed to even find it say "must" look a certain way for ANY tag) is that the entire original point of HTML is for saying what things ARE -- then letting the user agent best figure out how to handle presenting that to the user.
It was only during the browser wars with the endless extra crap that came to be known as HTML 3.2 (and is now being revived with the HTML 5 idiocy) that we got away from that concept -- the point of HTML 4 STRICT and CSS2 being to drive us back to that original point making separation of presentation from content a reality. A really nice reality.
But like anything else, it goes in cycles. By the time of HTML 6 (or whatever they'll call it by then with the "let's get rid of versioning lunacy) we'll probably see 90% of the new tags in 5 dropped as redundant just as they were for 4 Strict when everyone realizes how malfing mind-blowingly STUPID HTML 5 really is... or as I'm starting to call it, HTML 3.25.
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.
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
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:
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.Code:<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>
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.
Any posts I write in Arial are on my mobile phone, so please excuse typos etc.
Any posts I write in Verdana are on a PC, so feel free to berate me mercilessly for any mistakes
Posting Permissions
Reply With Quote
Bookmarks