Tables to be replaced in media queries

HTML & CSS
1

Hi

Tables is not my forte (in fact, nothing is…)

I have a table that goes somehting like this:

 <table>
      <tr>
        <th>Chain</th>

        <th>Chain</th>
        <th>Country</th>
        <th>City</th>
<th></th>
        <th><img src="Star5a.png" alt=""></th>
        <th><img src="Star4a.png" alt=""></th>
        <th><img src="Star3a.png" alt=""></th>
      </tr>
    <?php
	if($results)
	{
		// Throw them all in a while loop
		while($prepare->fetch()) {


?>

At a certain media query I want to change the images. I’ve been scratching my head all day without coming to a decision about the best way to handle the php page (the css is obviously easy).

Should I create a new div to be display:none until I need it? but can I do it with a table? I suppose put the above table within a div and another with the different images inside another div.

Is that the way to go?

Thanks

2

I’m not really sure what you mean, are you wanting to change the star images?

When asking about css it’s often best to show the resulting html rather than php. I understand the results may vary, but a typical example may help.

3

Yes, I want to change them for smaller ones as the screen narrows

It is a mixed html/php page

my real question is should I introduce a

<div id="table1"> table as above </div>

<div id="table2"> table as above but with different images </div>

does this make sense or there is a better way?

My bi guestion is that the <table> is not closed until after a lot of php code. So, I can I start another one?

The pages are not live yet.

Thanks

4

I’m not sure about swapping the images out, but you might want to look at the structure and fix it up a little. This is an example of an HTML table structure from the Mozilla Developer Network. You’ll notice it uses the <thead> tag, which is missing from your own. I’d have thought you’d want to open up a <tbody> tag before you go into the loop for the data rows too.

<p>Simple table with header</p
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

<p>Table with colgroup</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>
1 Like
5

Hi Chris

There are two things that frighten me; tables and php. The idea of redoing the page, which I put together with a lot of Sitepoint help does not appeal to me, but… I will be looking at your suggestion as soon as I get this “small” problem out of the way: changing images at a lower screen width.

I’ve put the page in a temporary test page for you to see (It will be deleted soon). Enter Oxford as a query and after getting the results, narrow the page. I want it go all the way to below 300px and I’m having problems at about 330px. I have new smaller images that might do the trick.

If the current table closed before the php code, I would know what to do, but starting two divs that only close later after a lot of php, confuses me a bit,

6

I’m not sure where <div> tags come into it. I could understand them perhaps being wrapped around an entire table, but I’d not think they would be appropriate inside the table structure themselves. How do you think they would help in this situation?

7

I don’t think that duplicating the table is a good idea, if you do go down the route of duplication, I would do it only to the images, not the whole table:-

<th><img class="big" src="Star5a.png" alt="Five Stars"><img class="small" src="Star5a-small.png" alt="Five Stars"></th>

But there may be better options. The initial thought is the standard way of making responsive images, by allowing them to scale to fit their container. however if you need to use a totally different image, you will need something else.
In that case, the first thing to mind is the new picture element, it is for exactly this purpose. The only problem I see with that is your apparent need for legacy browser support.
Another option is to use a background image, that can be easily swapped with a query. The issue with that being the lack of content in the cell will affect semantics for screen readers and bot, as well as the cell size. So that approach would require some form of text/image replacement.

1 Like
8

I don’t know… that’s why I’m looking for an alternative

9

It’s the same image but scaled down

How do you do that?

10

and then something like this in the css??

.big img{
display:none;
.small img{
display:block;
}
11

qim,

The primary problem that I see at the moment (before caffeine) is a dirth of effective use of the table elements. Too much padding inside the cells instead of using text-align:center, for example, and, as @SamA74 mentioned, you have not taken advantage of allowing the images to scale down at narrow widths. Making your table sufficiently fluid shouldn’t be a big deal. Unless dorked with, fluid is how tables behave quite naturally.

Recode the table. No need to create a duplicate with slightly smaller images.

2 Likes
12

Are you joking!!!..

Hi ronpat, the day I can do that easily is a long way off. Not with tables. This was my first one!

13

If you intend to use the same image then definitely don’t duplicate anything. Just use css to shrink the images.

14

Any properly structured table with no CSS applied is fluid by default. You’re already applying more complicated ideas to them.

15

Hi, well…

the current page that is live works well . I decide to add an extra column for State to take into account that there must be two dozen Londons in the USA!.. and that has caused problems of width.

I spent a couple of days changing database tables and this files and it is such a little thing I would like to just finish it and have it done with,

However, the various replies in this thread have convinced me that I must THEN spend some time and change the tables to make them a bit more professional.

I am going to try Sam’s idea first

.big img{
display:none;
.small img{
display:block;
}

and then come back for bigger things.

Thank you all.

16

Just have one version of the image and reduce the img width by either an explicit px value in a query, or a % value to make it fluid.

17

Give me another minute…

@qim,

I may have overlooked something, but I believe this is a fair start-over. Please apply these styles as indicated then let us see the site again to see if I’ve missed anything. DO NOT make additional changes on your own without documenting/mentioning them. Moving goalposts suck. I added a 100% width to the table as a “test feature” to show its potential width. I expect it to be limited to some max-width value after we iron out anything that has been missed.

Add somewhere:

table {
    width:100%;  /* ADD Me while coding to see the table's potential max size */
    margin:0 auto;
}

Search1.css (line 202)

table td {
/*    padding: 0 25px; /* DELETE Me.  DO NOT Use padding unnecessarily */
    text-align: center;  /* ADD Me. */
}

Search1.css (line 211)

table th {
    font-size: 20px;
    padding-bottom: 30px;
    padding-left: 0;  /* CHANGED from 25px.  DO NOT Use padding unnecessarily */
/*    text-align: left; /* DEELETE Me */
}

Search1.css (line 229)

table th:nth-child(7) {
    padding-left: 0;  /* CHANGED from 15px.  DO NOT Use padding unnecessarily */
}

Search1.css (line 233)

table th:nth-child(8) {
    padding-left: 0;  /* CHANGED from 15px.  DO NOT Use padding unnecessarily */
}

Search1.css (line 570)

table th img {
/*    margin-left: -25px; /* DELETE Me.  DO NOT Use negative margins unnecessarily */
/*    padding: 0 10px; /* DELETE Me.  DO NOT Use padding unnecessarily */
}

/* ADD THIS after the other table styles */

td:first-child img {
    height: auto;
    width: 100%;
}
2 Likes
18

Hi Ronpat

Many thanks

I’ve been out and am going out again in an hour, I’ll try to do it before I go.

19

I have to go out, too. Should return in a couple of hours or so.

20

Ok, changes made and it looks Good!

There was only a problem at the end arounf 325px, but as before I got rid of the “State” and leave just the Chain and the ticks.

I just need to centre the title Chain in table th:nth-child(1) and I’ll be ready for market!

http://pintotours.net/TEMP1/Search1.php

Many thanks

EDIT

At one point around 575px the logos get blown out. Why is that?

This? I took it out. I hope you don’t mind.

td:first-child img {
    height: auto;
    width: 100%;
}

Enter “Oxford” to make sure you get logos on all

I’ve put the smaller stars in the php file just to show you what I wanted to do. They look much better at smaller widths. And I really should mantain the state codes or it will be impossible to know which Oxford it refers to (UK, Mississipi, Alabama). Could you try and squeeze it in for it to look ok down to 300px?