Tables to divs please help!

I have lots of data that needs to be indexed on a website, all of the information is in tables, but the complication is that for search results you really need to use divs or you end up with, see attached below, which cuts off the entire right side.

The page which you can see renders the tables with perfect visibility. Here is what the code looks like using a div converter: tables converted to divs at tabletodivconverter.com here are the comparison results of the tables versus the generated divs. https://justpaste.it/denver-aa-meetings-tables and https://justpaste.it/denver-aa-meetings-divs

The results are so different, it would be hard to look at that versus the tables, or is there some sort of markup you can add in the html itself to put both code and with html choose to display one of the other depending on if the user is using desktop or mobile. The CMS uses different templates, but the SQL data it pulls is the same. Ideas? Maybe a better converter? Some of the converters online allow like a line or two and "require" you to backlink to them, so I won't be going that route. Looking for suggestions pretty please.

 

<a name="desktopmeetinglist">Desktop meetings list</a> | <a href="https://www.denverdonate.com/denver-co-aa-meetings/event/1-denver-sunday-aa-meetings#mobilemeetinglist">Mobile meeting list</a><br />
{module Denver Sunday AA Meetings}
<a name="mobilemeetinglist">Mobile meeting list</a>  | <a href="https://www.denverdonate.com/denver-co-aa-meetings/event/1-denver-sunday-aa-meetings#desktopmeetinglist">Desktop meeting list</a><br />
{module Denver Sunday AA Meetings Mobile}

Code (markup):

This is my crutch for the time being:
<a name="desktopmeetinglist">Desktop meetings list</a> | <a href="https://www.denverdonate.com/denver...1-denver-sunday-aa-meetings#mobilemeetinglist">Mobile meeting list</a><br />
{module Denver Sunday AA Meetings}
<a name="mobilemeetinglist">Mobile meeting list</a> | <a href="https://www.denverdonate.com/denver...-denver-sunday-aa-meetings#desktopmeetinglist">Desktop meeting list</a><br />
{module Denver Sunday AA Meetings Mobile}

 

For generic containing purposes, use DIV. For tables, use TABLES! There isn't a single valid reason to use DIV when you clearly have a tabular structure. That indexing-whatever thing is baloney. If it isn't obvious, use TABLE only for tables...

As far as that second post goes, the vertical bars are presentational, put them in CSS, not the markup. You're using the name attribute wrong. You're using the anchor element wrong. That full URI indicates that there's something very wrong with your website architecture as well.
Though what is that crutch of yours about? A piece of markup doesn't explain anything by itself, even more so because it doesn't have any meaning.

 

Uhm... that actually looks like tabular data; there's a semantic relationship to the columns and the rows are records. On uniform tabular data like that a table IS THE SEMANTICALLY CORRECT MARKUP TO USE!!!

Why are you trying to change it? Did someone pack you full of the lie of "never use tables" because they didn't understand what "don't use tables for layout" means?

What needs to be done there is to clean UP those tables so that they're semantically correct and get the presentation the hell out of them, NOT waste time trying to turn them into semantically INCORRECT tags.

<table class="meetings">
	<caption>
		<a href="https://www.denverdonate.com/denver-co-aa-meetings/event/1-denver-sunday-aa-meetings">
			Denver AA Meetings
		</a>
	</caption>
	<thead>
		<tr>
			<th scope="col">Day</th>
			<th scope="col">Time</th>
			<th scope="col">Group Name</th>
			<th scope="col">Address</th>
			<th scope="col">City</th>
			<th scope="col">District</th>
			<th scope="col">Codes</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Sunday</td>
			<td>06:30 AM</td>
			<th scope="row">Keeping It Simple</th>
			<td>3600 S. Clarkson (NE of Ch)</td>
			<td>Englewood</td>
			<td>11</td>
			<td>*n</td>
		</tr><tr>
			<td>Sunday</td>
			<td>06:30 AM</td>
			<th scope="row">Sunrise Serenity</th>
			<td>3355 S. Wadsworth #H125, 989-2816</td>
			<td>Lakewood</td>
			<td>30</td>
			<td>*n</td>
		</tr><tr>
			<td>Sunday</td>
			<td>06:45 AM</td>
			<th scope="row">Upon Awakening</th>
			<td>8817 S. Broadway (Ch)</td>
			<td>Highlands Ranch</td>
			<td>11</td>
			<td>*n</td>
		</tr>
		<!-- etc, etc... -->
	</tbody>
</table>

Code (markup):

EVERYTHING else being done there belonging in the external stylesheet.

In terms of small screen display, yes, tables are a pain in the arse, but since you can target mobile with media queries the best bet would be to force those TD into flex-box behaviors so you can break that one table-row into multiple rows. group name and address being the obvious ones to target for a change in behavior. Flex-wrap and nth-child to the rescue. Hiding the thead and using generated content to label each TD might also be in order since visually you'd lose the columnar relationship.

 

Oh, and the "key" boxes below -- those should probably be definition lists, NOT a table.

<div class="key">
	<h2>Meeting Codes</h2>
	<dl>
		<dt>O</dt><dd>Open</dd>
		<dt>C</dt><dd>Closed</dd>
		<dt>SP</dt><dd>Speaker</dd>
		<dt>ST</dt><dd>Step</dd>
		<dt>BB</dt><dd>Big Book</dd>
		<dt>GV</dt><dd>Grapevine</dd>
		<dt>T</dt><dd>Traditions</dd>
		<dt>CA</dt><dd>Candlelight</dd>
		<dt>Spn</dt><dd>Spanish</dd>
		<dt>B</dt><dd>Beginners</dd>
		<dt>M</dt><dd>Men</dd>
		<dt>W</dt><dd>Women</dd>
		<dt>G</dt><dd>Gay</dd>
		<dt>Y</dt><dd>Young People</dd>
		<dt>Frn</dt><dd>French</dd>
		<dt>Pol</dt><dd>Polish</dd>
		<dt>s</dt><dd>Smoking</dd>
		<dt>ASL</dt><dd>Sign Language Interpreter</dd>
		<dt>*</dt><dd>Wheelchair</dd>
		<dt>n</dt><dd>Non-Smoking</dd>
		<dt>Sit</dt><dd>Sitter</dd>
	</dl>
<!-- .key --></div>

Code (markup):

You want those equals signs, put them in with generated content.

 

I am not very adept at marking up tables, you seem very skilled. I just noticed with Joomla everying is css/divs, and specific to the mobile friendly pages. Will the tables you talk about collapse for mobile view?

 

The #desktopmeetinglist and #mobilemeetinglist is to make it easy when scrolling on something like an iphone to jump to different data views quickly, since the lists are so long, did I approach this incorrectly?