cancel
Showing results for 
Search instead for 
Did you mean: 
rpsimon
Lamplighter

How do I get rid of extra space between two tables on my page?

I am in the middle of working on a page and I am using tables.  I don't see a way to move a table.  Therefore, I am trying to delete extra space within the table.  In the editor mode, it looks fine.  (I chose hidden table borders, but for the purpose of this question, I have solid chosen.)  Anyway, once I save it, there's unnecessary space added.  How do I fix this?  Thanks.

Tags (1)
10 Replies
GideonWilliams
Adventurer II

Tables are soooooo frustrating.

A few things to try:

Try 1

Go the HTML Editor and find the second <td style> entry and check if there is anything before the 1. Student Name. If there is then delete it

Try 2

Check the height of the 2nd row. Click in the row. Go to Table > Cell > Cell Properties. If there is anything in the Height section then delete it

Try 3

Check you have not centered the row vertically. Click in the row. Go to Table > Cell > Cell Properties. Check the V Align box and make sure it says None

Try 4

There might be something odd with the first row. Try deleting the row then clicking in Row 2 and adding in a new Row to go above it and typing out your header again.

Hope this helps?

rpsimon
Lamplighter

Thanks - I tried all of these, but no luck.

rpsimon 

Posting part of your html might allow us to test it and try to solve it for you.  Just looking at the screenshots I don't have any further ideas other than what Gideon kindly shared.

Here ya go! Smiley Happy 

<p><span>The Grade Detail Tray is a tool in the New Gradebook  that makes it fast and easy to view and enter grades, submission status, and comments, both by individual assignment or student. In addition, the Grade Detail Tray provides a place to access Speedgrader for an Assignment or view the individual Grade page for a student.</span></p>
<p style="text-align: center;"><span></span><span></span><span></span><span style="font-size: 18pt;"><strong>Grade Detail Features</strong></span></p>
<p><img style="float: right;" src="https://magendavidyeshivah.instructure.com/courses/7306/files/163164/preview" alt="GradeDetailTrayNumbered.png" width="322" height="747" data-api-endpoint="https://magendavidyeshivah.instructure.com/api/v1/courses/7306/files/163164" data-api-returntype="File" /></p>
<table style="height: 830px; width: 44.4817%; font-family: sans-serif; font-size: 1rem; border-collapse: collapse; border-style: solid;" border="1">
<tbody>
<tr style="height: 837px;">
<td style="width: 100%; border-style: hidden; height: 837px;">1. <strong>Student Name</strong> - Click on a student's name from the Grade Detail Tray to view an individual student's Grade page.
<p>2. <strong>Move between Students</strong> - Click the left or right arrow next to the student name to navigate between students. Assignment will stay the same, so this functionality can be used to quickly click through and view or enter grades, submission status, and comments for an individual assignment.</p>
<p>3. <strong>Move between Assignments</strong> - Click the left or right arrow next to the name of the assignment to navigate between assignments. Student will stay the same, so this functionality can be used to quickly click through and view or enter grades, submissions status, and comments for an individual student.</p>
<p>4. <strong>Speedgrader</strong> - Click the Speedgrader link to be taken to Speedgrader for this assignment and specific student submission.</p>
<p>5. <strong>Grade entry box</strong> - Enter, view, or change student grade in this box.</p>
<p>6. <strong>Status</strong> - Enter, view, or change student submission status in this box. If you select the "Late" status you will also be able to specify the total number of days late.</p>
<p>7. <strong>Comments</strong> - Enter, view, edit, or delete comments in this box. Students will be able to view this information unless the assignment is muted. </p>
</td>
</tr>
</tbody>
</table>
<p><span>For additional information on how to use the Grade Detail Tray see the following video.</span></p>
<p><span><iframe src="//www.youtube.com/embed/JOWde812sDQ" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></span></p>

I would get rid of the height attribute on table row and cells. 

Yup I replaced the <tr style="height: 837px;"> with <tr> and the table resized

Renee_Carney
Community Team
Community Team

rpsimonThanks for posting this.  I was able to paste it into a test page I have.  I'm not sure if you noticed this yet, but if you resize the window (wide/narrow) the table is adjusting next to the image as you might expect it to.  Because the image has a defined width it does not resize.  So the text to the left of it is centering itself (vertically) along that image.

I tried some css tricks with vertical-align and margin-top, but didn't find anything that worked well.  This type of alignment can be a bit more complex.

The other thing you might want to do is just link out to this page, rather than try to recreate it.  https://community.canvaslms.com/docs/DOC-16034-grade-detail-tray 

rpsimon
Lamplighter

 @Renee_Carney ‌ thank you so much for trying this.  Is there a way to embed the page as opposed to linking to it?  Must I add it to Google Drive in order to embed it?