html help: extra space and returns added, visual editor rearranged code

Thanks for the plug-in. The data comes over correctly but I’m having a hard time formatting it with HTML tags. I’ve got three issues:

1. I added html table tags around my json data so that I can add the data into table cells. The table works and looks great, but there are 26 <p> tags generated before it. I can’t figure out why. Here’s the code:

<!-- Monday -->
<table class="classScheduleMonday">
<tr><th class="classScheduleMonday" colspan="4">Monday</th></tr>
[jsoncontentimporter url=https://secure.yogareg.com/mountainspirit/pub?action=jsonclasslist&dow=2 basenode=result numberofdisplayeditems=-1 urlgettimeout=5]{subloop-array:classes:-1}<tr><td class="classSchedule">{classes.startTime} - {classes.endTime}</td>{subloop:classes.classtype:-1}<td class="classSchedule">{classes.classtype.name}</td>{/subloop:classes.classtype}{subloop-array:classes.instructorList:-1}<td class="classSchedule">{classes.instructorList.firstName} {classes.instructorList.lastName}</td>{/subloop-array:classes.instructorList}<td class="classSchedule">{classes.studio}</td></tr><tr><td class="classScheduleFiller" colspan="4"></td></tr>{/subloop-array:classes}[/jsoncontentimporter]</table>

2. Then I tried to use <div> tags instead of the <table> tags, but it looks like a new line is added at each </div> that closes the data cell. The end result looks like a table with only 1 column instead of 4 columns. Is there any way to stop this behavior? Here’s the code:

<div>MONDAY</div>
<div class="divClassScheduleTable">
<div class="divClassScheduleTableBody">
<div class="divClassScheduleTableRow">
[jsoncontentimporter url=https://secure.yogareg.com/mountainspirit/pub?action=jsonclasslist&dow=2 basenode=result numberofdisplayeditems=-1 urlgettimeout=5]
{subloop-array:classes:-1}
<div class="divClassScheduleTableCell">{classes.startTime} - {classes.endTime}</div>
{subloop:classes.classtype:-1}
<div class="divClassScheduleTablCeell">{classes.classtype.name}{/subloop:classes.classtype}</div>
{subloop-array:classes.instructorList:-1}
<div class="divClassScheduleTableCell"><a href="https://secure.yogareg.com/mountainspirit/pub?action=showinstructors#{classes.instructorList.id}" target="_blank" rel="noopener">{classes.instructorList.firstName} {classes.instructorList.lastName}</a></div>
{/subloop-array:classes.instructorList}
<div class="divClassScheduleTableCell">Location: {classes.studio}</div>
{/subloop-array:classes}
[/jsoncontentimporter]
</div></div></div>

Last question:
I work in the “text” view in WordPress to write this code. I switched to the “visual” view and when I clicked back over to “text”, WordPress had rearranged my code (separated [json] plugin from html and it no longer worked. Can you please explain why or provide a way to prevent that since other users also make changes to this site? I started with the code in #1, but got this back:

<!-- Monday -->
[jsoncontentimporter url=https://secure.yogareg.com/mountainspirit/pub?action=jsonclasslist&dow=2 basenode=result numberofdisplayeditems=-1 urlgettimeout=5]{subloop-array:classes:-1}{subloop:classes.classtype:-1}{/subloop:classes.classtype}{subloop-array:classes.instructorList:-1}{/subloop-array:classes.instructorList}{/subloop-array:classes}[/jsoncontentimporter]
<table class="classScheduleMonday">
<tbody>
<tr>
<th class="classScheduleMonday" colspan="4">Tuesday</th>
</tr>
<tr>
<td class="classScheduleFiller" colspan="4"></td>
</tr>
<tr>
<td class="classSchedule">{classes.startTime} - {classes.endTime}</td>
<td class="classSchedule">{classes.classtype.name}</td>
<td class="classSchedule">{classes.instructorList.firstName} {classes.instructorList.lastName}</td>
<td class="classSchedule">{classes.studio}</td>
</tr>
<tr>
<td class="classScheduleFiller" colspan="4"></td>
</tr>
</tbody>
</table>

Thanks in advance for any help!