The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Tables issue, can't get something where I want it, trying to arrange things right but can't
djende
post May 24 2023, 11:46 PM
Post #1





Group: Members
Posts: 2
Joined: 24-May 23
Member No.: 28,933



I've been trying to get this visitor counter and time & date widget to go beside the receiver information shown in the screenshot I'm adding to this post. I've limited html knowledge and I've gone as far as I can go without asking for help. Any help on this matter would be greatly appreciated. I am going to add the code for you to reference. Thanks in advance!

here's the image of what this looks like and hopefully helps to show what I'm looking to do. I realize the sizing of these two things is too wide for that space but that part I can adjust I just want a situation where I can put those there.

Attached Image


here is the code as it is now:

<a href="https://aboutradio.kevinheaven.net" title="on going photos and updates of this project and a little about me" target="_blank"><img alt="Qries" src="https://i.imgur.com/4Jp8U5h.gif"></a>


<a href="https://youtube.com/playlist?list=PLH9GSRnrdHXEO-2za47z-W69iXW_WYtJV" title="START HERE! Tutorial Videos I made on how to use this radio and videos about Education Videos about Radio Propogation" target="_blank"><img alt="Qries" src="https://i.imgur.com/AX7YGOV.gif"></a>

<a href="https://wiki.radioreference.com/index.php/Priority_Dispatch_Codes" title="Understand what the codes police fire & ems use when communicating" target="_blank"><img alt="Qries" src="https://i.imgur.com/si1GZnD.gif"></a>


<a href="https://pghscanner.com/freq.php" title="Pghscanner.com is an independant list of known frequencies in and around Pittsburgh. Includes Beaver Berks and Washington. Also information on local HAM, Marine, Railroad, etc..." target="_blank"><img alt="Qries" src="https://i.imgur.com/MI57Q1d.gif"></a>
<a href="https://www.radioreference.com/apps/db/?tab=reports&ctid=2242&rpt=1" title="All Identified Frequencies in Allegheny County" target="_blank"><img alt="Qries" src="https://i.imgur.com/e8VWTCL.gif"></a>
<a href="https://www.radioreference.com/apps/db/?tab=reports&ctid=2303&rpt=1" title="All Identified Frequencies in Washington County" target="_blank"><img alt="Qries" src="https://i.imgur.com/iApT7kP.gif"></a>
<a href="https://www.radioreference.com/apps/db/?tab=reports&ctid=2244&rpt=1" title="All Identified Frequencies in Beaver County" target="_blank"><img alt="Qries" src="https://i.imgur.com/eFEOvQu.gif"></a>


<a href="https://en.wikipedia.org/wiki/Shortwave_bands" title="Learn more about each of the Shortwave Radio Bands" target="_blank"><img alt="Qries" src="https://i.imgur.com/eaN2RKV.gif"></a>
<a href="http://www.hamuniverse.com/hfbands.html" title="Learn more about each of the HAM Radio Bands" target="_blank"><img alt="Qries" src="https://i.imgur.com/UjFRWiK.gif"></a>

<a href="https://radio-locator.com/cgi-bin/finder" title="Identify radio stations you find on the AM/FM Dial" target="_blank"><img alt="Qries" src="https://i.imgur.com/Zew2RiM.gif"></a>
<a href="https://www.short-wave.info/index.php" title="Identify the Shortwave Radio Broadcast you have discovered" target="_blank"><img alt="Qries" src="https://i.imgur.com/dVE0Oe1.gif"></a>
<a href="https://www.qrzcq.com" title="Look up the callsign of HAM radio operators you hear on the radio" target="_blank"><img alt="Qries" src="https://i.imgur.com/qbOelo9.gif"></a>
<a href="https://www.sigidwiki.com/wiki/Signal_Identification_Guide" title="Identify patterns you see on the waterfall" target="_blank"><img alt="Qries" src="https://i.imgur.com/GZrHKYs.gif"></a>



<a href="https://pskreporter.info/cgi-bin/psk-freq.pl" title="up-to-the-moment best frequencies on HF for the radios location" target="_blank"><img alt="Qries" src="https://i.imgur.com/T6SN2Hc.png"></a>
<a href="http://hfradio.org/fot_3.html" title="Optimal Working Frequencies Chart (shows best frequency in Mhz for propagation from East Coast to Specific other locations)" target="_blank"><img alt="Qries" src="https://i.imgur.com/GZl3q6V.gif"></a>
<a href="https://pskreporter.info/pskmap.html" title="Aggregated map of digimode contacts. type 'kevin' in the box next to 'callsign' and click 'go!' to see the contacts this station has intercepted" target="_blank"><img alt="Qries" src="https://i.imgur.com/vyOQIB8.png"></a>
<a href="https://aprs.fi/#!lat=40.49650&lng=-80.20600" title="Choose 2m (APRS) then click on the 'PACKET' bookmark. You'll now be intercepting local APRS signals. Learn more about the results by using this link" target="_blank"><img alt="Qries" src="https://i.imgur.com/0mx07Px.png"></a>


<a href="https://www.youtube.com/@TamithaSkov" title="Space Weather News from The Space Weather Woman Tamitha Skov" target="_blank"><img alt="Qries" src="https://i.imgur.com/cJi8qUV.gif"></a>




<br />
<table>
<style>
table, td, th {
text-align:left;
font-size:12px;
margin: 0px;
background-color:rgba(0, 0, 0, 0.15);
}
</style>
<td>
<center>
<a href="http://www.hamqsl.com/solar2.html" title="click for more information and resources" target="_blank"><img src="http://www.hamqsl.com/solar101pic.php?dummy=8484744"></a>
</center>
</td>
<td>
Receiver is operated by: <a href="mailto:djende@gmail.com" title="email me" target="_blank">Kevin</a><br/>
Device: <a href="https://www.adafruit.com/product/4292?gclid=CjwKCAiAyc2BBhAaEiwA44-wW2LplmkBICKfKbw_EfJhYrtRTYd8HNMqDKR5mXj63b5SMGliDKCmMBoCHN4QAvD_BwE" target="_blank">Raspberry Pi 4 1GB</a><br />
Dongles:
<a href="https://www.nooelec.com/store/sdr/sdr-receivers/nesdr.html" target="_blank">3 x Nooelec NESDR v4</a> |
<a href="https://airspy.com/airspy-hf-discovery/" target="_blank">Airspy HF+ Discovery</a><br />
Antennas: <a href="https://centerfireantenna.com/folded-dipole-scanner-antennas/" target="_blank">3 x Centerfire Folded Dipole</a> | <a href="https://www.ebay.com/sch/i.html?_from=R40&_trksid=p2380057.m570.l1311&_nkw=mla-30+loop+antenna&_sacat=0" target="_blank">MLA-30 Active Loop</a><br><br>
15 miles West of Pittsburgh PA. Monitoring Public Safety Police/Fire/EMS etc in Allegheny and surrounding counties.
Monitors flight traffic for The Pittsburgh International Airport 3 miles north of location.
Monitors Marine Band, Railroad, CB Radio, FRS, GMRS, BRS. etc..
Monitors HF, VHF '2m' and UHF '70cm' Ham Bands. Broadcast Bands include AM/SW.
Monitors HF Air Traffic.
Helpful links are provided above to get the most out of this radio including Demo videos I've made to get you started. Explore and enjoy!<br><br>
</td>

</table>
</td>
</table>
<center>
<table style="width:100%"><table height=50>
<tr>

<th><a href="https://flaghitcounter.com/details/ku" target=”_blank”><img src="https://flaghitcounter.com/ku/" alt="Flag Hit Counter" width="950" height="50" border="0"></a></th>
<th>
<iframe src="https://free.timeanddate.com/clock/i8v0f25l/fn6/fs16/fc09f/tc000/ftb/pl0/pr0/pt5/pb5/tt0/tw1/tm2/td1/th1/ta1/tb4" frameborder="0" width="131" height="52" target="_blank"></iframe>
</th>
</tr>
</center>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 25 2023, 11:31 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(djende @ May 25 2023, 06:46 AM) *

here's the image of what this looks like and hopefully helps to show what I'm looking to do. I realize the sizing of these two things is too wide for that space but that part I can adjust I just want a situation where I can put those there.

Attached Image

I think you need a table structure like this:

CODE
<table>
<tr>
<td rowspan="2">Solar</td>
<td>Receiver</td>
<td>Visitors</td>
</tr>
<tr>
<!--<td>Replaced by the row-spanned Solar cell in the previous row</td>-->
<td colspan="2">15 Miles</td>
<!--<td>Replaced by the col-spanned 15 Miles cell in the previous column</td>-->
</tr>
</table>

As you can see, the first "Solar" cell spans two rows; so the cell in the first column, second row is not used (I added it inside HTML comments anyway just for illustration, if you want you can remove that part). Also, the "15 Miles" cells spans two columns, so the cell in third column in the second row is not used either (again I kept it commented out).

I should add that the above is a "layout table", which is a little frowned upon nowadays (semantically speaking, tables are meant for tabular data, not page layout), but if you have limited html knowledge it might be a good way to start.

Below are just some general comments on your code example:

QUOTE
<table>
<style>
table, td, th {
text-align:left;
font-size:12px;
margin: 0px;
background-color:rgba(0, 0, 0, 0.15);
}
</style>
<td>

The above is invalid, the STYLE element can only be used in a page's HEAD section. Also, a TD element (cell) must be in a TR element (row).

QUOTE
<table style="width:100%"><table height=50>

This is also invalid, if you want to nest tables (not necessary for this layout) the second TABLE element must be in a cell of the parent table.

QUOTE
<a href="https://flaghitcounter.com/details/ku" target=”_blank”>

Here something has happened with the quote characters around "_blank". Be careful with some text editors that use things like curly quotes, they can't be used for HTML code.

QUOTE
<th>
<iframe src="https://free.timeanddate.com/clock/i8v0f25l/fn6/fs16/fc09f/tc000/ftb/pl0/pr0/pt5/pb5/tt0/tw1/tm2/td1/th1/ta1/tb4" frameborder="0" width="131" height="52" target="_blank"></iframe>
</th>

In proper data tables the TH element is for table header cells, but since this looks like a layout table it's semantically better to use the ordinary TD element (even though TH should give the same visual result). Also the TARGET attribute doesn't belong in an IFRAME element.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
djende
post May 31 2023, 12:42 AM
Post #3





Group: Members
Posts: 2
Joined: 24-May 23
Member No.: 28,933



Thank you for taking a look at this for me. I am just seeing your response. I will go over this carefully tomorrow. I appreciate all the effort

QUOTE(Christian J @ May 25 2023, 12:31 PM) *

QUOTE(djende @ May 25 2023, 06:46 AM) *

here's the image of what this looks like and hopefully helps to show what I'm looking to do. I realize the sizing of these two things is too wide for that space but that part I can adjust I just want a situation where I can put those there.

Attached Image

I think you need a table structure like this:

CODE
<table>
<tr>
<td rowspan="2">Solar</td>
<td>Receiver</td>
<td>Visitors</td>
</tr>
<tr>
<!--<td>Replaced by the row-spanned Solar cell in the previous row</td>-->
<td colspan="2">15 Miles</td>
<!--<td>Replaced by the col-spanned 15 Miles cell in the previous column</td>-->
</tr>
</table>

As you can see, the first "Solar" cell spans two rows; so the cell in the first column, second row is not used (I added it inside HTML comments anyway just for illustration, if you want you can remove that part). Also, the "15 Miles" cells spans two columns, so the cell in third column in the second row is not used either (again I kept it commented out).

I should add that the above is a "layout table", which is a little frowned upon nowadays (semantically speaking, tables are meant for tabular data, not page layout), but if you have limited html knowledge it might be a good way to start.

Below are just some general comments on your code example:

QUOTE
<table>
<style>
table, td, th {
text-align:left;
font-size:12px;
margin: 0px;
background-color:rgba(0, 0, 0, 0.15);
}
</style>
<td>

The above is invalid, the STYLE element can only be used in a page's HEAD section. Also, a TD element (cell) must be in a TR element (row).

QUOTE
<table style="width:100%"><table height=50>

This is also invalid, if you want to nest tables (not necessary for this layout) the second TABLE element must be in a cell of the parent table.

QUOTE
<a href="https://flaghitcounter.com/details/ku" target=”_blank”>

Here something has happened with the quote characters around "_blank". Be careful with some text editors that use things like curly quotes, they can't be used for HTML code.

QUOTE
<th>
<iframe src="https://free.timeanddate.com/clock/i8v0f25l/fn6/fs16/fc09f/tc000/ftb/pl0/pr0/pt5/pb5/tt0/tw1/tm2/td1/th1/ta1/tb4" frameborder="0" width="131" height="52" target="_blank"></iframe>
</th>

In proper data tables the TH element is for table header cells, but since this looks like a layout table it's semantically better to use the ordinary TD element (even though TH should give the same visual result). Also the TARGET attribute doesn't belong in an IFRAME element.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Jun 3 2023, 11:45 PM
Post #4


Advanced Member
****

Group: Members
Posts: 100
Joined: 25-December 22
Member No.: 28,719



I'm not sure what makes any of this tabular data... it looks like 1990's "tables for layout" which is supported by the seemingly outmoded use of images to do text's job. Images of illegible colour contrasts for the text as well. That images of text all seem to have useless meaningless not-even a word alt text certainly not helping matters.

The picture certainly not helping with what's clearly NOT tabular data making nearly every line of that code gibberish nonsense... mated to an inaccessible fixed width design.

I'm really not sure what you're trying to accomplish, but I can say with near certainty this isn't how you go about it.

I mean I see what should be a NAV with UL with text instead of your images, a flex container, and possibly one floated image (the part you circled in red). There is NOTHING there that should even be using a TABLE tag! Well, unless this is for HTML e-mails you want to be blocked as spam since most e-mail clients still have their craniums wedged up HTML 3.2's rectum.

Don't even get me started about the <style> tag inside body, inside <table> where it's completely invalid, the use of pixel metric fonts flipping the bird at usability and accessibility... This all probably sounds a bit harsh, but from top to bottom you need to toss this and start over.

Just the presence of the <center> tag -- which hasn't been valid HTML since 1997 -- says that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:12 AM