Is inline CSS geschikt voor volgende tabel multimedia-modaliteiten ?

Status
Niet open voor verdere reacties.

leifoet

Gebruiker
Lid geworden
7 okt 2007
Berichten
326
Ik probeer de tabelinhoud in een HTML-mail 'leesbaar' te maken op een desktopscherm, een laptopscherm, op een smarthone en in een printafdruk.

Initiële tabelcode voor desktop :
myMail.HTMLbody = myMail.HTMLbody & "<table style='width:25%; font:90% arial, sans-serif; color:black'>"
myMail.HTMLbody = myMail.HTMLbody & "<td style='width:30%'>" (voor tabelkolom 1)
myMail.HTMLbody = myMail.HTMLbody & "<td style='width:70%'>" (voor tabelkolom 2)

Deze code geeft enkel een behoorlijk resultaat voor een desktopscherm - bij een printafdruk en op een smartphone moet ik de table width verhogen naar ca 100% van de beschikbare ruimte (blad papier en/of schermpje) om een behoorlijke lay-out te krijgen, maar dan loopt de PC-voorstelling weer in het honderd.

Is dat combineerbaar met inline CSS ? Dank voor tips.
 
De html voor een email is zeer afwijkend van de html voor normale browsers.
Dit komt omdat de vele mail programma's elk hun vervelende dingen hebben.
Hieronder de basis voor een email.

Code:
html voor myMail.HTMLbody

<style type='text/css'>
@media (min-width: 600px) {
  .tbl {width: 580px !important; margin: 0 auto !important;}
}
</style>
<table class='tbl' width='100%' style='width:100%;'>
<tr>
<td width='30%' style='width:30%;'>Links 1</td>
<td width='70%' style='width:70%;'>Rechts 1</td>
</tr>
<tr>
<td width='30%' style='width:30%;'>Links 2</td>
<td width='70%' style='width:70%;'>Rechts 2</td>
</tr>
</table>

Zet ook deze css INLINE bij style='...'

table {
  margin:0;
  border-spacing:0;
  border-collapse:collapse;
  border:1px solid #777;
}
td {
  box-sizing:border-box;
  vertical-align:top;
  padding:5px 8px;
  hyphens:auto;
  border:1px solid #777;
}

Noot: border-spacing:0 werkt niet in elk email programma. Gewoonlijk wordt namelijk een tabel in een tabel gezet zodat deze niet nodig is.

Suc6. Have fun.
 
Laatst bewerkt:
ik ga ervan uit dat deze css code moet geconverteerd worden naar inline code ? Hoe doe ik dat en waarbij (bij welk tabelelement) moet ik ze plaatsen ?

<style type='text/css'>
@media (min-width: 600px) {
.tbl {width: 580px !important; margin: 0 auto !important;}
}
</style>

Dank voor tips.
 
Dat kan je niet in-linen, omdat het een if-statement is. Of je ozu er een class van moeten maken van een grid-system, zoals de Bootstrap.
Maar in een mail heb je daar niks aan. Dus gewoon lekker met procenten werken, en niet te moeilijk denken.

De ondersteuning van CSS in mails is vergeleken met internetbrowsers best summier. Vooral Microsoft loopt vaak achter de feiten aan.
 
Laatst bewerkt:
Niet optimaal maar je kan het omzeilen met max-width en margin auto, dan kan je het <style> gedeelte weglaten.
Code:
<table width='100%' style='width:100%; max-width:560px; margin:0 auto; border-spacing:0; border-collapse:collapse; border:1px solid #777;'>
   .....
</table>

Overigens is Gmail nog veel erger dan Microsoft Outlook want Gmail gooit gewoon de gehele <head> weg. Dat is de reden waarom de style inline moet staan. Microsoft laat de <head> netjes staan. Afgezien van dit heeft elk modern emailprogramma vervelende dingen.
 
Laatst bewerkt:
myMail.HTMLbody = myMail.HTMLbody & "<table width='100%' style='width:100%; max-width:560px; margin:0 auto; border-spacing:0; border-collapse:collapse; font:90% arial, sans-serif; color:black;'>"

Bovernstaande code toegevoegd - wordt gevolgd door onderstaande

myMail.HTMLbody = myMail.HTMLbody & "<tr>"
myMail.HTMLbody = myMail.HTMLbody & "<td colspan='2'>"

myMail.HTMLbody = myMail.HTMLbody & "<B>TEKST</B>"
myMail.HTMLbody = myMail.HTMLbody & "</td></tr>"
myMail.HTMLbody = myMail.HTMLbody & "<tr><td style='width:30%;'>"
myMail.HTMLbody = myMail.HTMLbody & "- TEKSTTEKST"
myMail.HTMLbody = myMail.HTMLbody & "</td>"
myMail.HTMLbody = myMail.HTMLbody & "<td style='width:70%;'>"

De tabel lay-out lukt nog niet al te best
table width=100% en style width=100% => geeft geen goede verdeling van de twee kolommen (td) op ca 30%-70% - neigt soms eerder naar een 50% verdeling - op smartphone soms gecentreerd ...
Ik probeer de code te begrijpen om eventueel te kunnen 'spelen' met de % (of andere elementen) => slaat table width specifiek op de breedte in één bepaald medium - waar slaat style width dan specifiek op ? voor welk medium is de max-width van 560px bedoeld ? Hoe zou ik de code eventueel nog kunnen 'verfijnen' of althans toch proberen ?
Dank.
 
Laatst bewerkt:
Waarschijnlijk heb je in die 30% cellen ergens te lange woorden, dan zijn er wat extra maatregelen nodig.
Code:
table {
  width:100%;
  max-width:560px;
  margin:0 auto;
  border-spacing:0;
  border-collapse:collapse;
  border:1px solid #777;
  font-family:Arial,sans-serif;
  font-size:13px;
}
td {
  box-sizing:border-box;
  vertical-align:top;
  padding:5px 8px;
  hyphens:auto;
  border:1px solid #777;
  word-wrap:break-word;
  word-break:break-all;
  white-space:normal;
}

<table width='100%'>
<tr>
<td colspan='2' width='100%' style='width:100%; font-weight:bold; text-align:center;'>TITEL</td>
</tr>
<tr>
<td width='30%' style='width:30%'>DitIsEenHeelLangWoordInEenKleineCel</td>
<td width='70%' style='width:70%'>Rechts</td>
</tr>
</table>


Ik probeer de tabelinhoud in een HTML-mail 'leesbaar' te maken op een desktopscherm, een laptopscherm, op een smartphone en in een printafdruk.
De vormgeving hierboven is de basis voor elk apparaat en voor email.
 
Laatst bewerkt:
Dank - ik probeer dit uit in inline versie en geeft feedback.
Probeerde net de volledige testcodetabel links (in plaats van centraal) te aligneren - met mijn beperkte CSS-kennis lukt dit niet met text-align:left in table - waar plaats ik deze (of een andere code) ?
 
Geef voor links neerzetten van de tabel deze een margin:0; in plaats van margin:0 auto;
(in een email minder mooi, maar dat is kwestie van smaak)
 
Mijn feedback klinkt niet goed - ik slaag er niet in om bovenvermelde code (van 2 december) om te zetten in inline CSS zodat PC-scherm, én/of afdruk op A4 én/of smartphone scherm én/of tabletscherm een tabel met 2 kolommen (ca 30 en 70%) goed weergeven.
Bestaat soms een CSS inline mogelijkheid om de breedte van de tabel (en kolommen) afhankelijk te maken van de pixelbreedte van het medium ?
Dank voor tips.
 
RE: Bestaat soms een CSS inline mogelijkheid om de breedte van de tabel (en kolommen) afhankelijk te maken van de pixelbreedte van het medium ?
Staat al in de css van 2 dec. namelijk width:100% en width:70% en width:30%

Zorg eerst dat de tabel goed is waarbij html en css gescheiden zijn. Het inline zetten is de allerlaatste actie anders zie je door de bomen het bos niet meer. De code van 2 dec staat in het bijgevoegde bestand. Hierin kan je de tabel aanpassen zoals je 'm wilt hebben.

Je hebt het nu ineens niet meer over weergave in een email. In dat geval kan de regel max-width:560px eruit (die zit erin voor Outlook email). Het is sowieso erg ongebruikelijk om 1 template te maken voor beeldscherm/printer én email.

Kan je hiermee verder?
 

Bijlagen

  • tabel.zip
    653 bytes · Weergaven: 37
Laatst bewerkt:
Ter verduidelijking.
Het probleem situeert zich wel en nog steeds bij de 'email'. De voorbeeld-tabelcode in gewone html plaatsen lukt(e) perfect, maar dat is hier niet aan de orde.
Een template voor alle media in email in inderdaad de uitdaging.
Ik probeer verder - dank voor tips.
 
RE: Een template voor alle media in email in inderdaad de uitdaging.
Kort antwoord: niet mogelijk!

Het belangrijkste waarom je een html email template niet kan combineren met de html website template:

Vormgeving alleen tabel in tabel in tabel, enz.
Houdt rekening met email clients die @media niet ondersteunen.
Houdt rekening met email clients die de <head> verwijderen.
Alle css moet inline omdat de <head> soms wordt verwijderd.
Gebruik nooit een background image!
Niet elke email client ondersteunt responsive percentages!
Gebruik HTML 4.01 Transitional (pre-historie).
Gebruik geen float en margin!
Bereken altijd de totale breedte bij gebruik van padding.
Gebruik geen position!
Liever geen <div> gebruikekn, hiervoor in de plaats <table>.

Alleen al om het bovenstaande kan je het niet combineren.
Doe ook het volgende in emails:

Maak een <head> met een "email-normalize" voor email clients die de <head> wel lezen.
Gebruik bij voorkeur oude ellende als <font>.
Geef elke tabel + afbeelding een width en height.
Afbeelding verplicht een alt tekst geven.
Overbodig te zeggen: geen Javascript.
Elke tabel: Cellpadding 0, Cellspacing 0, Border 0
Maak een hidden pre header voor email clients.
En nog meer weetjes (google even)...

Belangrijk:
Stuur in een html email altijd een "text" versie mee.

Als het je lukt dan is je oplossing geld waard :d

Aanvulling:
Je hebt gelijk dat de html/css voor de diverse resoluties geschikt moet zijn (dus een responsive template). Maar daarnaast moet de html/css ook geschikt zijn voor de verschillende email clients. Als voorbeeld: de css voor Gmail is anders dan de css voor Outlook op dezelfde Windows pc. En daarnaast leest Gmail de <head> niet en Outlook snapt percentages niet. Gezellig feestje.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan