Aligning columns in multiple tables on a page (Kookaburra)

Backlight 4, 5 & 6 Support
#1

I thought I’d better start a new thread as this has moved on from my table-striped query.

<table class="table-striped">

<thead>
<tr>
<th scope="row" colspan="3"; style="text-align:left";>
<strong>Group Exhibitions</strong>
</th>
</tr>

</thead>
<tbody>
<tr>
    
    <td style="width: 50%;"><strong>Exhibition</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Venue</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Dates</strong></td>
</tr>
<tr>
    <td>Historic & Contemporary Photography 'equals'</td>
    <td style="text-align:left;">Ipswich Art School Gallery</td>
    <td style="text-align:left;">18<sup>th</sup> May - 1<sup>st</sup> September 2013</td>
</tr>
<tr>
    <td>Slack Space  'equals'</td>
    <td style="text-align:left;">Colchester</td>
    <td style="text-align:left;">12<sup>th</sup> - 22<sup>nd</sup> June 2013</td>
</tr>
<tr>
    <td>Ephemera - Artist-in-Residence with 'equals'</td>
    <td style="text-align:left;">Ipswich Town Hall</td>
    <td style="text-align:left;">3<sup>rd</sup> - 14<sup>th</sup> September 2013</td>
</tr>
<tr>
    <td>Lux Locus Spectaculo</td>
    <td style="text-align:left;">Ipswich Town Hall</td>
    <td style="text-align:left;">16<sup>th</sup> July 2015 - 31<sup>st</sup> March 2016</td>
</tr>
<tr>
    <td>University of Suffolk</td>
    <td style="text-align:left;">Ipswich Hospital</td>
    <td style="text-align:left;">March 2015 to date</td>
</tr>
<tr>
    <td>Lux Locus Degree Show</td>
    <td style="text-align:left;">UCS North campus</td>
    <td style="text-align:left;">June 2014</td>
</tr>
<tr>
    <td>Lux Locus Free Range 2014</td>
    <td style="text-align:left;">Truman Brewery London</td>
    <td style="text-align:left;">June 2014</td>
</tr> 
<tr>
    <td>RPS International Photobook Exhibition - curator and exhibitor East London Photomonth</td>
    <td style="text-align:left;">Espacio Gallery, Bethnal Green, London</td>
    <td style="text-align:left;">18<sup>th</sup> October 2016 - 23<sup>rd</sup> October 2016</td>
</tr>  
<tr>
    <td>Edition 5 with the Rooftop Collective as part of International East London Photomonth</td>
    <td style="text-align:left;">The Clerkenwell Gallery, London</td>
    <td style="text-align:left;">25<sup>th</sup> October 2016 - 30<sup>th</sup> October 2016</td>
</tr>   
<tr>
    <td>2 Years</td>
    <td style="text-align:left;">M F Gallery & Framing, Ipswich</td>
    <td style="text-align:left;">29<sup>th</sup> October 2016 - 26<sup>th</sup> November 2016</td>
</tr> 
<tr>
    <td>Kerseys "Ipswich Interpretations"</td>
    <td style="text-align:left;">Kerseys, Ipswich</td>
    <td style="text-align:left;">8<sup>th</sup> December 2016 - 8<sup>th</sup> June 2017</td>
</tr>   
<tr>
    <td>Photograd Anniversary Show</td>
    <td style="text-align:left;">University of Suffolk, Ipswich</td>
    <td style="text-align:left;">April  2017</td>
</tr> 
<tr>
    <td>VIEWPOINTS - with the Rooftop Collective featuring Consuelo Simpson responding to my work with 5 other photographers and artists in conversation curated by Anna McNay</td>
    <td style="text-align:left;">Espacio Gallery Bethnal Green, London</td>
    <td style="text-align:left;">April 17<sup>th</sup>-22<sup>nd</sup> 2018</td>
</tr> 
<tr>
    <td>Photograd as part of International biennial PhotoEast 2018 </td>
    <td style="text-align:left;">University of Suffolk</td>
    <td style="text-align:left;">June 2018</td>
</tr>              
<tr>
    <td>Photograd as part of International East London Photomonth 2018 </td>
    <td style="text-align:left;">London Metropolitan University London</td>
    <td style="text-align:left;">November 2018</td>
</tr>  
<tr>
    <td>Landscape Rebels  - an edit from Welcome to the Funny Farm</td>
    <td style="text-align:left;">Christchurch Mansion, Ipswich</td>
    <td style="text-align:left;">October 22<sup>nd</sup> 2022 - April 16<sup>th</sup> 2023</td>
</tr>              
</tbody>
</table>
<table class="table-striped">
<thead>
<tr>
    <th scope="row" colspan="3"; style="text-align:left";>
<strong>RPS East Anglia Contemporary Group Exhibitions</strong></th>
    </th>
</tr>
</thead>
<tbody>
<tr>
    <td style="width: 50%;"><strong>Exhibition</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Venue</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Dates</strong></td>
</tr>
<tr>
    <td>Contradictions</td>
    <td style="text-align:left;">Beyond the Image</td>
    <td style="text-align:left;">27<sup>th</sup> May - 19<sup>th</sup> June 2016</td>
</tr>
<tr>
    <td>MEUS - an official PhotoEast 2018 Fringe as part of this international biennial</td>
    <td style="text-align:left;">Ipswich Town Hall</td>
    <td style="text-align:left;">May 2018</td>
</tr>
<tr>
    <td>MEUS - a Post-PhotoEast 2018 Fringe</td>
    <td style="text-align:left;">Frame Workshop & Gallery, Ipswich</td>
    <td style="text-align:left;">July 2018</td>
</tr>
</tbody>
</table>
<table class="table-striped">
<thead>
<tr>
    <th scope="row" colspan="3"; style="text-align:left";>
<strong>Solo Exhibitions</strong>
</th>
    
</tr>
</thead>
<tbody>
<tr>
    <td style="width: 50%;"><strong>Exhibition</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Venue</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Dates</strong></td>
</tr>
<tr>
    <td>Featured Artist</td>
    <td style="text-align:left;">M F Gallery & Framing, Ipswich</td>
    <td style="text-align:left;">April 2015</td>
</tr>
<tr>
    <td>Edgelands an 8 month solo exhibition with the sponsorship of Kodak Alaris</td>
    <td style="text-align:left;">Museum of East Anglian Life</td>
    <td style="text-align:left;">July 2015-March 2016</td>
</tr>
<tr>
    <td>Featured Artist</td>
    <td style="text-align:left;">M F Gallery & Framing, Ipswich</td>
    <td style="text-align:left;">September 2018</td>
</tr>
<tr>
    <td>Welcome to the Funny Farm</td>
    <td style="text-align:left;">Flower tent, Allotment Association, Suffolk Show 2022</td>
    <td style="text-align:left;"> May 31<sup>st</sup>- June 1<sup>st</sup> 2022</td>
</tr>
<tr>
    <td>Welcome to the Funny Farm</td>
    <td style="text-align:left;">Flower tent, Allotment Association, Suffolk Show 2023</td>
    <td style="text-align:left;"> May 31<sup>st</sup>- June 1<sup>st</sup> 2023</td>
</tr>
</tbody>
</table>
<table class="table-striped">
<thead>
<tr>
    <th scope="row" colspan="3"; style="text-align:left";>
<strong>Permanent Exhibitions</strong>
</th>
    

</tr>
</thead>
<tbody>
<tr>
   <td style="width: 50%;"><strong>Exhibition</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Venue</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Dates</strong></td>
</tr>
<tr>
    <td>Orwell Bridge at 11.9m wide 1.6m high</td>
    <td style="text-align:left;">Atrium North Campus University of Suffolk</td>
    <td style="text-align:left;">September 2016 to date</td>
</tr>
<tr>
    <td>Felixstowe Docks at sunrise August BH Monday 2016 at 8.1m wide 1.6m high</td>
    <td style="text-align:left;">Atrium North Campus University of Suffolk</td>
    <td style="text-align:left;">September 2016 to date</td>
</tr>
</tbody>
</table>
<table class="table-striped">
<thead>
<tr>
    <th scope="row" colspan="3"; style="text-align:left";>
<strong>Virtual Exhibitions</strong>
</th>
    
</tr>
</thead>
<tbody>
<tr>
    <td style="width: 50%;"><strong>Exhibition</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Venue</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Dates</strong></td>
</tr>
<tr>
    <td>Photograd Virtual Festival 2021</td>
    <td style="text-align:left;">Making Vernacular Images</td>
    <td style="text-align:left;">April 12<sup>th</sup> 2021</td>
</tr>
<tr>
    <td>EACG Virtual Festival 2022</td>
    <td style="text-align:left;"><a href="https://www.artsteps.com/view/618695ed78f08e01171a6afb" target="_blank">Self</a></td>
    <td style="text-align:left;">January 26<sup>th</sup> 2022 to date</td>
</tr>
<tr>
<td>EACG Virtual Festival 2022</td>
    <td style="text-align:left;"><a href="https://www.artsteps.com/view/62ee5e68d0bc75523fd52655" target="_blank">Weekend</a></td>
    <td style="text-align:left;">September 1<sup>st</sup> 2022 to date</td>
</tr>
<td>EACG Virtual Festival 2023</td>
    <td style="text-align:left;"><a href="hhttps://www.artsteps.com/view/6425b4ea3e871e67372623e5" target="_blank">Waldo</a></td>
    <td style="text-align:left;">April 1<sup>st</sup> 2023 to date</td>
</tbody>
</table>

produces this output

Screenshot 2024-12-31 at 11.48.35
Screenshot 2024-12-31 at 11.48.35740×1484 46 KB

I think I’ve picked up on the error of my ways as explained by @Daniel but I’m perplexed as to why the Dates coloumn does not align through all the tables. From what I have read up on, this is a common issue and may not be of my making but I would not bet on that!
Would I be better off not having separate tables? I want to separate out the different exhibition types but the non-alignment of the Dates column is doing my head in.
Any suggestions? I am a bit of a muppet when it comes to this stuff.
https://tomowensphoto.co.uk/exhibitions/
Thanks in advance and a happy new year to the team.
TomO

#2

you could use <th> to set the width of columns

#3

Hi Rod,
Thanks for the link. I’ve been in and out of that very useful resource several times already, and CSS The missing manual, but reading it again, width can be applied to either TD or TH. I’d been using TD but tried using TH on a few of the tables and get the same out of alignment formatting.
The first two tables are as originally posted.
As I was using colspan to fill the original TH row, I tried using Caption which automatically spans the width of the table and elevated what were TD rows to TH rows.
https://tomowensphoto.co.uk/exhibitions/.
I reformatted the colour of the TH row to make it stand out. As the CSS specifies width as 100%, I have used percentages to specify the widths of the TH columns. I presume that is the sensible thing to do?
CSS for the table

type or paste c * table
 *************************/
caption {
    caption-side:top;
    margin:  0;
	padding: 0.5em 1em;
    background-color:#3c3c73; color:white;
    text-transform:uppercase;
    font-weight: bold;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	box-sizing: border-box;
	empty-cells: show;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 2rem 0;
	text-align: left;
	vertical-align: baseline;
	width: 100%;
}

table, thead, tfoot {
	border: 1px solid #57575a;
	padding: 0;
}

thead {
	vertical-align: bottom;
}
th {
    background-color:#9999cd; color:white;
    text-transform:uppercase;
    
}

tr {
	margin:  0;
	padding: 0;
}

td, th {
	margin:  0;
	padding: 0.5em 1em;
}

table.table-striped tbody tr:nth-child(odd) {
	background-color: #ffffff;
}

table.table-striped tbody tr:nth-child(even) {
	background-color: #f2f2f2;
}

table.stack-table {
	border: none;
}

table.stack-table thead,
table.stack-table tfoot {
	display: none;
}

table.stack-table tr,
table.stack-table td,
table.stack-table th {
	display: block;
}

table.stack-table tbody tr {
	border: 1px solid #57575a;
	margin: 0 0 1.5rem;
}

table.stack-table tbody td:before {
	content: attr(data-th);
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
}

table.stack-table tbody tr:last-child {
	margin-bottom: 0;
}

Hope that makes sense? I just don’t know why the first two columns align vertically but the third one seems to have a mind of its own.

Thanks.
TomO

#4

I just ran the table html through an html validator. There are syntax errors, like placing a semi-colon after the quote marks in styles as well as using a semi-colon where I don’t think it’s needed (or maybe it needs to be a comma):

<th scope="row" colspan="3"; style="text-align:left";>

I don’t think the semi-colon is needed after colspan=“3”
and the style attribute should have the semi-colon inside the quote mark:
style="text-align:left;"

There are several of these errors throughout, which may be contributing to the alignment issues you’re seeing.

There are also places where style is declared twice.

<tr>
   <td style="width: 50%;"><strong>Exhibition</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Venue</strong></td>
    <td style="text-align:left;" style="width: 25%;"><strong>Dates</strong></td>
</tr>

It looks like the second “style” isn’t being honored. Put it all under one style tag.

<tr>
   <td style="width: 50%;"><strong>Exhibition</strong></td>
    <td style="text-align:left; width: 25%;"><strong>Venue</strong></td>
    <td style="text-align:left; width: 25%;"><strong>Dates</strong></td>
</tr>

That seems to solve the alignment problem

#5

Many thanks Rod. I’ll get back on to those errors.
Happy New Year
TomO

#6

Very grateful for your help Rod.
That html validator link helped me enormously.
The answer it seems was to to remove the left-align statements in the styling of the column heads.
I’ve used a caption to span the table width and used the styling for width in the ‘th’ elements and now the columns align properly.
TomO