Lentelė svetainės puslapyje
Gerai suplanuota lentelė ar kainų lentelė svetainės puslapyje, gali pritraukti daugiau klientų ir taip padidinti pardavimus.
Lentelės svetainės puslapiuose puikiai tinka rodyti produktų ar paslaugų duomenys, ypatybes, kainas ir pan. Gražūs CSS efektai gali būti naudojami tinkamai juos sudarant ir pateikiant aiškias ir skaitomas duomenų lenteles.
Mes kuriame stilingas lenteles svetainės puslapiuose su HTML ir CSS kolekcija. Keletą lentelių pateiksime kaip pavyzdžius ir kaip jūsų naudojimui. Šių puošniu, mūsų sukurtu lentelių pavyzdžiai, gali tikrai sukrėsti jūsų svetainę!
Lentelė svetainės puslapyje ir visuose irenginiuose
Žmonės naudoja skirtingus įrenginius, norėdami peržiūrėti tinklalapius. Tai gali būti stalinio kompiuterio monitorius, nešiojamas kompiuteris, planšetinis kompiuteris ar išmaniojo telefono ekranas. Įprastos lentelės negali automatiškai prisitaikyti prie skirtingų dydžių ekranų. Naudojant CSS, galima padaryti bet kurią tradicinę lentelę „atsakančią“ patrauklia ir prestiziškai atrodančia.
HTML Lentelė jūsų naudojimui
Šio tipo ir spalvų lentelė yra gana plačiai naudojama. Nusistatykite lentelės eilučių skaičių, ploti ir t.t. Gali jums tarnauti ir kaip kategorijų lentelė.
Jūsų tekstas iš kairės, pvz. Internetinių svetainių kūrimo priemonės |
Jūsų tekstas centre, pvz. Mūsų paslaugos: Internetiniu parduotuvių kūrimas |
<table style="font-size: 16px;" width="100%"> <tbody> <tr class="firstRow"> <td style="margin: 0px; padding: 18px 8px; border-width: 1px 1px 0px 0px; border-image: initial; outline: 0px; background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); text-align: left;">Jūsų tekstas iš kairės, pvz. Internetinių svetainių kūrimo priemonės</td> </tr> <tr> <td style="margin: 0px; padding: 18px 28px; border-width: 1px 1px 0px 0px; border-image: initial; outline: 0px; background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6)); text-align: center;">Jūsų tekstas centre, pvz. <strong>Mūsų paslaugos:</strong> Internetiniu parduotuvių kūrimas</td> </tr> </tbody> </table>
Paprastos lentelės pavyzdys
Nepateikiame šios lentelės kodo, tokia lentele galite sau susikurti bet kokio redaktoriaus pagalba.
# | Product | Payment Taken | Status |
---|---|---|---|
1 | TB – Monthly | 01/04/2012 | Approved |
2 | TB – Monthly | 02/04/2012 | Declined |
3 | TB – Monthly | 03/04/2012 | Pending |
4 | TB – Monthly | 04/04/2012 | Call in to confirm |
You must be logged in to post a comment.