Hoe maak je in HTML een responsive tabel? Bijvoorbeeld om logo’s of sponsors zichtbaar te maken op je website? Hoe kan ik een logo overzicht op een website plaatsen? Of hoe maak ik plaatjes klikbaar in een HTML tabel die goed toont op allerlei beeldschermen? Lees het in deze WordPress blog.

Een HTML responsive tabel die je met mijn hulp gaat maken,  kun je herkennen doordat alle kolommen een breedte hebben die je uitdrukt in een percentage. Afhankelijk van het beeldscherm van de webbezoeker hebben de kolommen van de HTML tabel een vaste maat, doordat elk percentage het aandeel neemt van het beschikbare aantal pixels op dat specifieke beeldscherm. Wanneer je in een tabel logo’s of sponsoren wilt weergeven, neem dan deze tips ter harte bij maken van responsive tabellen:

  • Gebruik mijn HTML code als basis (in het voorbeeld zijn het 18 vakken, 6 rijen met elk 3 lege ruimten) en sleutel daarmee in je website
  • Zorg dat alle logo’s (in ieder geval 1 per horizontale rij) in het vierkant gemaakt zijn, zodat je responsive tabel er mooi uit komt te zien qua tussenruimten. Denk aan logo’s die minimaal 300 pixels breed zijn. Breder mag ook, maar hoe groter het plaatje, hoe langer de laadtijd van de pagina.. (denk aan 30kb)
  • Het is mogelijk om alle logo’s een link mee te geven, door voor elk plaatje <img> een <a href=”link.html”> te zetten, en na de image weer een </a>. In mijn voorbeeldtabel doe ik dat niet. Wel in de weergave eronder. Hoe je in HTML een plaatje klikbaar maakt (linkt), kun je ook lezen in dit bericht.
  • Je kunt elk plaatje laten uitlijnen op “Rechts”, maar mogelijk maakt het niet zoveel uit, als alle instellingen maar gelijk zijn voor elk plaatje. Je kunt in elk vak mijn plaatje wegklikken. En via ‘Media’ er een nieuw plaatje inzetten.

HTML responsive tabel code voorbeeld

<!– HTML sponsoren tabel –>
<table style=”width: 100%;” border=”0″ cellspacing=”20″ cellpadding=”10″ align=”left”>
<tbody>
<tr>
<th><img id=”longdesc-return-18627″ class=”alignright size-full wp-image-18627″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”responsive tabel maken” /></th>
<th><img id=”longdesc-return-18628″ class=”alignright size-full wp-image-18628″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”responsive html tabel maken” /></th>
<th><img id=”longdesc-return-18642″ class=”alignright size-full wp-image-18642″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></th>
</tr>
<tr>
<td><img id=”longdesc-return-18626″ class=”alignright size-full wp-image-18626″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
<td><img id=”longdesc-return-18629″ class=”alignright size-full wp-image-18629″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
<td><img id=”longdesc-return-18630″ class=”alignright size-full wp-image-18630″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
</tr>
<tr>
<td><img id=”longdesc-return-18631″ class=”alignright size-full wp-image-18631″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”html responsive tabel maken” /></td>
<td><img id=”longdesc-return-18632″ class=”alignright size-full wp-image-18632″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
<td><img id=”longdesc-return-18633″ class=”alignright size-full wp-image-18633″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
</tr>
<tr>
<td><img id=”longdesc-return-18643″ class=”alignright size-full wp-image-18643″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
<td><img id=”longdesc-return-18635″ class=”alignright size-full wp-image-18635″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”responsive tabel maken Html” /></td>
<td><img id=”longdesc-return-18636″ class=”alignright size-full wp-image-18636″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
</tr>
<tr>
<td><img id=”longdesc-return-18637″ class=”alignright size-full wp-image-18637″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
<td><img id=”longdesc-return-18638″ class=”alignright size-full wp-image-18638″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”responsive tabel maken” /></td>
<td><img id=”longdesc-return-18639″ class=”alignright size-full wp-image-18639″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
</tr>
<tr>
<td><img id=”longdesc-return-18640″ class=”alignright size-full wp-image-18640″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”responsive tabel maken” /></td>
<td><img id=”longdesc-return-18641″ class=”alignright size-full wp-image-18641″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
<td><img id=”longdesc-return-18666″ class=”alignright size-full wp-image-18666″ tabindex=”-1″ src=”https://www.gerbengvandijk.nl/wp-content/uploads/2018/10/Photoshop-elements-basis-foto-video-bewerking-pakket-kopen.jpg” alt=”beschrijf foto” /></td>
</tr>
</tbody>
</table>
<!– EINDE HTML sponsoren tabel –>

HTML responsive tabel weergave van bovenstaande code

De bovenstaande code is gebruikt. Alleen is elk plaatje achter wel gelinkt. Via de editor kun je invoeren naar welke url elk plaatje moet verwijzen (zie “aangepaste url” instelling). Via een bericht of pagina kun je een foto bewerken door er overheen te scrollen. Klik op het potloodje. Ga naar tab geavanceerde instellingen. Zie ‘Weergave instellingen’, de titel ‘link naar’, geeft je een aantal opties. Dus kies voor aangepaste link maken. Binnen je responsive HTML tabel die je hebt gemaakt.

beschrijf foto beschrijf foto beschrijf foto
beschrijf foto beschrijf foto beschrijf foto
beschrijf foto beschrijf foto beschrijf foto
beschrijf foto beschrijf foto beschrijf foto
beschrijf foto beschrijf foto beschrijf foto
beschrijf foto beschrijf foto beschrijf foto
0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *