colspan syntax

[Graeme]

Thought I would have a play with HTML and CSS to see if I can knock up an astrophotography gallery website.

I've got a table with information on the left and an image on the right hand side. The table title spans the two columns. I'm trying to make the bottom row span across for a general comment, but after much searching I can't find an answer.

Here's the table HTML code:

<table class="gallery" >
<thead>
<tr>
<th colspan="2">
<a href="images/Iris_Nebula__NGC7023_090722.jpg">Iris Nebula</a>
</tr>
</thead>
<tbody>
<tr>
<td>NGC7023</td>
<td rowspan="5">
<img
src="images/Iris_Nebula__NGC7023_090722.jpg"
alt="Iris Nebula - NGC7023 - 09/07/22"
title="Iris Nebula - NGC7023 - 09/07/22"
width="400">
</td>
<td><a href="images/Iris_Nebula__NGC7023_090722.jpg"></a></td>
</tr>
<tr><td>Caldwell 4</td></tr>
<tr><td>Cepheus</td></tr>
<tr><td>09/07/22</td></tr>
<tr><td>25 x 360 seconds</td>
<tr><td>First successful use of the new ZWO OAG. First use of new observatory PC. <td></tr>
</tbody>
</table>

It looks like this at the moment:

Capture.jpg

But I would like the text at the bottom to go across the whole width of the bottom of the table. I've tried colspan in various ways to no avail!

Cheers

Graeme

[HansV]

Change

<tr><td>First successful use of the new ZWO OAG. First use of new observatory PC. <td></tr>

to

<tr><td colspan=2>First successful use of the new ZWO OAG. First use of new observatory PC. <td></tr>

[Graeme]

Cheers Hans

Thought I tried that one!

It looks just right now.

Regards

Graeme

[LineLaline]

Pleeeease stay away from tables, please, don't make me cry now Oops, there I go.
Why not use CSS instead?

[Graeme]

Pleeeease stay away from tables, please, don't make me cry now Oops, there I go.
Why not use CSS instead?

Thanks for your input LL. The use of the table is to wrap the text around the thumbnail image and the colspan element does that nicely. There is a collection of CSS lines dealing with the look of the table in the usual way. Sounds like you have had problems using tables but I have 55 images which all need hyperlinking and I've done half of them now!

Out of interest, as an HTML newbie, what would have been an alternative way of laying it out?

Regards

Graeme

[LineLaline]

Are you learning HTML now, and they are telling you to use tables?
Out of curiosity: where?
But then: tables are mostly used to lay out erm, tabular data
Separation of layout and content is important because not only will it produce lighter pages you can then use the layout instructions in a separate file, allowing you to immediately edit the way your pages look in one go.

To lay out in a grid way such as a table there are many different options. One of the classic ones would be combining <div> tags with the float instruction which is part of CSS.
In a stylesheet (to separate layout from content) try out this for instance for one 'row' with three 'cells'. There are many many many different ways to do this though!

In the stylesheet
div {
width: 100%;
overflow-y: auto;
background:#74B9C7;
}
div div {
width: 32%;
float:left;
background:#ECECEC
}
.padding-right {
padding-right:2%;
}
.stop-float {
float:none;
}

I added the 'div div' to style a divider inside a divider.
.padding-right: this is a class and starts with a dot.

On your page
<div>
<div class="padding-right">
<p><strong>Lah di dah 'cell' one, so to speak.</strong></p>
<p>Since this was the first column its first paragraph was very entitled. This was a&nbsp;mistake&nbsp;as he would realize in a few minutes.</p>
</div>
<div class="padding-right">
<p>Let there be another column.</p>
<p>The bear was intrigued: why didn't the honey crystallize as was required for this sophisticated experiment?</p>
</div>
<div>
<p>Go on then, let's add another one the masses cheered.</p>
<p>Lorem spoke very harsh words, Ipsum just shrugged though: he had heard it all before.</p>
</div>
<br class="stop-float">
</div>

I gave the parent container a colour so you can see it if the 'cells' (ugh) are not equally tall.

[LineLaline]

To be clear though: my layout is just a example and quite different from your layout, it's just to show that you can lay things out with CSS and make them look like a table

[Graeme]

Are you learning HTML now, and they are telling you to use tables?
Out of curiosity: where?

Yes, this is my first venture into HTML/CSS, does it show? I'm picking it up using Youtube. You may have noticed a lack of formal tutelage! I mostly use w3schools and Code Academy as references.

My use of tables was a choice based on the ability to use the colspan element.

I had a play with your data and the simplicity is good. Using br class is nice and clean. Here's my result:

Capture.jpg

It would be interesting to see how to make the top and bottom rows span both columns but don't spend too much time on it as I have entered all the data associated with 53 images using a table and I won't be doing it all again using divs. Maybe next time!

Thanks

Regards

Graeme

[LineLaline]

I am quite fond of the text you used in your example This is what can come out of my head when I go full improv
If you don't specify any 'floating' a divider will default always fill up the width of the parent container (such as the page).
Okay, tables for you then!
But I cannot, nay, will not resist. Here is an example.

example.png

[LineLaline]

And sorry for the typo! Well, at least it's a bold one.