SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 37

Hybrid View

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    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
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 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
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 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,247
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    a single word is NOT a paragraph...
    <p>Bullpoop.</p>

    rudy.ca | @rudydotca
    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
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 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
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 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
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That's an html solution - not css

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

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

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

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

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

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

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

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 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.

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

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stevie D View Post
    by just making it into a long list and floating the items. Unfortunately, IE8 (and possibly others) loses the bullet when you do that.

    .

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

  20. #20
    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 Paul O'B View Post
    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:
    Code CSS:
    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 63, and the HTML is just a plain and simple <ul> filled with <li>s.

  21. #21
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Does setting list-style-position:inside; fix that IE 8 problem there Stevie?

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ya said float twice

  23. #23
    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 deathshadow60 View Post
    Ya said float twice
    Just wanted to make sure it was definitely floated in case the browser forgot

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Ya said float twice
    Is that a new property value float:twice;

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Is that a new property value float:twice;
    I was hoping CSS3 would introduce float: aimlessly.

    Looks like we've scared Debbie away.


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
  •