SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 37
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Table with Bullet-Points in Cells

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Maybe wrap the word in a <p> and use left padding and a background image, or use p:before.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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>

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    td {
      padding-left:24px; /* image width plus any desired padding */
      background:url(images/bullet.png) center left no-repeat;
    }
    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.

    Shame we can't rely on generated content yet -- a td:before { content:"&middot;"; } would also be a nice solution.

  5. #5
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,015
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    a single word is NOT a paragraph...
    <p>Bullpoop.</p>

    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    A-- a single word is NOT a paragraph...
    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.

    shortest possible complete sentence is something like "Go!"
    A paragraph is defined as one or more sentences expressing a single train of thought so the one word can be a paragraph.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It depends on the context but a single word can be a paragraph.
    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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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).

    Quote Originally Posted by deathshadow60 View Post
    the extra semantics applied by the paragraph tag is … possibly damaging to accessibility.
    What problems might it cause?

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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:
    Code:
    <td colspan="8" class="header" align="center"><b><font size="+2">Table Title</font></b></td>
    doing the job of
    Code:
    <caption>Table Title</caption>
    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 exceptions

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Well it often breaks column and row scope in screen readers if you don't explicitly state them
    Thanks Jason. Interesting info (the whole post) and duly noted. AXIS is a new one to me, so I'll check it out.

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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?

    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.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    How about CHAR, CHAROFF, RULES, and FRAME?
    No, I wasn't aware of those either and something makes me feel kinda glad of that, too.

  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,529
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    That's an html solution - not css

    Use &bull;
    Code:
    <td>&bull; Friendly</td>

  15. #15
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    the extra semantics the paragraph tag is redundant/pointless and possibly damaging to accessibility.
    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.

    Quote Originally Posted by ralph.m View Post
    What problems might it cause?
    None, other than the table itself.

    Quote Originally Posted by deathshadow60 View Post
    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?
    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.
    Ryan B | My Blog | Twitter

  16. #16
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rguy84 View Post
    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:
    Code:
    td:before {
      content:"\2022";
    }
    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...

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

  17. #17
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    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 saying
    Code:
    <table> 
    <tr>
     <th>heading</th>
    is the same as
    Code:
    <table>
    <tr>
      <th scope='col'></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.

    Maybe read Tables with JAWS and MAGic and Table Reading Commands for JAWS and Table examples
    Ryan B | My Blog | Twitter

  18. #18
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    No Ryan, I'm saying that:
    Code:
    <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>
    Is generally treated the same as

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

    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)

  19. #19
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    <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.
    "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
    Therefore scope is not applied by default. A DIV breaks association because THEAD, TBODY and TFOOT are basically a div (as quoted above).
    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!)
    ... uhm multi-level/layer tables.
    THEAD and TBODY, check 'em out. NOT what they are actually for by the spec, but it is how they are often treated
    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.
    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.
    Ryan B | My Blog | Twitter

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rguy84 View Post
    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.
    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.

  21. #21
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Though I don't know if I'd call it "fixing code" so much as behaving to the original intent of HTML.
    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.
    Ryan B | My Blog | Twitter

  22. #22
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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.

  23. #23
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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:

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

  24. #24
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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.

    Quote Originally Posted by ralph.m
    AXIS is a new one to me, so I'll check it out.
    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.

  25. #25
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,827
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    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.


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
  •