Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted April 5, 2014 3:56pm by

Using <tr> and <td> inside <div>

At my work I came across this situation where I have to use html tags to format tooltips for java applet using StringBuffer. My manager wanted me to display tooltip in a table format. The data for tooltip were coming from different java classes, so one table was not enough to cover all. I tried using table tag in each java class with StringBuffer, but the tables in the tooltip appeared with alignment specific to each table and it did not look pretty. So, instead of using table tag, I used div with tr and td for each table and it solved my problem. Now, the tables in the tooltip have same alignment and looks good. My question is, did I do the right thing wrapping tr and td with div? I looked at the documentation for div tag and I did not see anywhere that tr and td being used as child elements of div.

Instead of using:

table tr td.../td /tr /table table . . . /table

I used: div tr td.../td /tr /div div . . . /div

It gave me all the rows and columns nicely aligned for multiple div.

If anyone can tell me the way I used div was right or wrong, I would very much appreciate. I just don't want somebody at work looking at my code in the future and think that I was crazy. I am sorry if I did not make my issue clear enough, but thanks in advance!

April 5, 2014 4:15pm

Perhaps if you could give a couple tooltip examples with fake data then you could get some help with either styling the tables properly so it looks the way you want or maybe whether tables are even the right way to go on this.

If the tooltip info is not tabular data then you should not use a table. I can't tell whether you have tabular data or were simply wanting to use a table for layout purposes.

6 Answers

April 5, 2014 4:09pm

Hi Prabhat,

Thanks for fixing some of your code. I think you may still have some inline code in your paragraph at top that we can't see. Inline code can be wrapped with single backtick's

Your second code block would be invalid html. <tr> elements can only appear inside a <table> element. They can also be children of <thead>, <tbody>, and <tfoot> but those elements would need to be children of the table element. So ultimately, a tr needs a table ancestor.

I believe the only place a div would be allowed when working with table elements is inside of a td or th

April 5, 2014 4:10pm

Hmmm, I thought I was seeing code blocks before I replied.

April 5, 2014 4:02pm

You should be using table rows and table data inside a table. If you are wanting to not use table's then you can look into other ways of aligning things.

April 5, 2014 4:14pm

Thank you for your response. I just edited my question so that it would display the tag names I was talking about. Is it a bad practice to use tr and td inside a div? Here, I am not using div inside table. Using div instead of table seemed easy and a quick fix for my problem. Is it reasonable to use div instead of table?

April 5, 2014 4:19pm

As I mentioned in my answer, it's invalid html. You were concerned about coworkers looking at this in the future. So it's up to you to decide if you're ok with them seeing invalid html. This won't pass a validator without errors. You also run the risk of not every browser being able to render this correctly.

See my comment to your question. Maybe you can get help with doing this the right way if you can give more information.

April 5, 2014 4:36pm

For example I have multiple java classes that contain method like this:

` public String getToolTipText() { final Descriptions descriptions = getContext().getDescriptions();

    final StringBuilder sb = new StringBuilder();

    sb.append("<div style='font-size: 8px;' cellpadding='1' cellspacing='0'>");
    sb.append("<tr><td>ID:</td><td>" + someID + "</td></tr>");
    sb.append("<tr>" + "<td>Start: </td>" + startTime + "</tr>");
    sb.append("<tr>" + "<td>End: </td>" + endTime + "</tr>");

    sb.append("<tr>" + "<td>Limits: </td>" + "<td>" + schedule.getLimitsDescription()
            + "</td>" + "</tr>");
    return sb.toString();
}`

My tooltip contains chunk of data like above from different sources. If I use <table> instead of <div>, I will have multiple table in one tooltip, I will lose the alignment of rows and column. Each tooltip requires specific tables. If I use <div> like above, the misalignment issue goes away. Please help!

April 5, 2014 4:58pm

Ok, is the code block above one complete tooltip? Or this is one source of data and another source of data will also go into this tooltip?

What I don't understand is if you say you will have multiple tables in one tooltip why are you not also going to have multiple div's in one tooltip if you're using them interchangeably?

Also, I think you may be missing some td tags around your startTime and endTime

April 5, 2014 5:03pm

If at all possible, see if you can abstract away the java and show us what one complete tooltip contains.

Perhaps show us the alignment problems you had when you were using tables. That might make this more clear.

April 6, 2014 2:04am

Jason,

No the code block is not one complete tooltip. Another source of data will also go into the tooltip. Yes, I will have multiple divs in one tooltip but the alignment problems does not come with divs. For example see the following screenshot using div vs. table. Also, notice extra line space between two tables using table tags.

alt Text

And, yes I did miss some td tags above.

Thanks!!!!

My screenshot is not displaying above. I used the format in Markdown Cheatsheet ![alt Text](/Desktop/Untitled.jpg "Using table")

April 6, 2014 5:50am

A screenshot could help out a lot. I think you can only place an image on here if you have it hosted somewhere. It can't be on your desktop.

Are you familiar enough with codepen.io that you can show a sample of one tooltip with tables and what the alignment problems are?

Perhaps if you can do a screenshot or a sample tooltip showing what a complete tooltip should look like then we can work out the proper html/css to make it look that way.

I just had a thought too. I don't know what the other data sources look like but the one you've shown is essentially a set of name/value pairs. So a description list, <dl> would be an appropriate way to markup that data source. Maybe even more semantic than using a table. Of course, it depends on whether your other data sources also follow this pattern.

So see if you can find some way to show us what a complete tooltip should look like or tell us what the other data sources look like.

April 6, 2014 5:38pm

I am not familiar with codepen.io, but I have included the screenshot below. The first one is using the <table> tag. When you look at the tooltip, you can see three tables(Plan Time, Train ID, and Station) separated by one line space between them. I tried all the attributes of table to make the column align and remove the space between tables. [IMG]http://i61.tinypic.com/21nqzp1.jpg[/IMG]

Next one is using <div> tag and this is how I wanted to present my tooltip on the UI. Since you said div is not the recommended way, I do not want to use it either. ! [IMG]http://i59.tinypic.com/23syag4.jpg[/IMG]

I could not make the whole tooltip one table because the tooltip displays different source of data depending on where you hover on the UI. I like your idea of <dl>, I am going to give it a try and see how it turns out. Other source of data follows the same pattern as well so it might work.

April 7, 2014 5:37am

Ok, I see now how you lose column alignment with 3 independent tables. I can see though from the div screenshot that visually you want this looking like it's all one table. If all 3 data sources fit together logically/structurally then it should be in one table or one description list <dl>

Maybe I'm not understanding why you can't make it one table. Is this tooltip being built dynamically based on where the user hovers? Or are all tooltips output as static html on the page on the server side?

I guess what I'm wondering is when you go to create a tooltip, why can't you output a opening table tag. Then have each of the relevant data sources output their <tr>'s and <td>'s and then after the last data source you output the closing table tag.

Can you make it so that each data source is only responsible for outputting the rows and cells?

April 11, 2014 1:41am

Jason, I was able to solve the problem by implementing a separate method that calls all the tooltips, and using the opening and closing <table> tag in the method forcing all the tooltip data to be one table. It worked as I expected and looked even better. I really appreciate your suggestions and input in making me aware of possible defects using div. Cheers!

April 11, 2014 2:54pm

Glad you got it working!

April 5, 2014 4:46pm

Alternative to that, you can check out the CSS rule display, you can style divs to behave like table, table-row, table-cell, table-column.

April 6, 2014 1:37am

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Prabhat Bastola

Prabhat Bastola

Using <tr> and <td> inside <div>

Jason Anello

Jason Anello

6 Answers

Jason Anello

Jason Anello

Jason Anello

Jason Anello

Adam Sackfield

Adam Sackfield

Prabhat Bastola

Prabhat Bastola

Jason Anello

Jason Anello

Prabhat Bastola

Prabhat Bastola

Jason Anello

Jason Anello

Jason Anello

Jason Anello

Prabhat Bastola

Prabhat Bastola

Jason Anello

Jason Anello

Prabhat Bastola

Prabhat Bastola

Jason Anello

Jason Anello

Prabhat Bastola

Prabhat Bastola

Jason Anello

Jason Anello

Rodrigo Villalobos

Rodrigo Villalobos

Prabhat Bastola

Prabhat Bastola