Kuinka keskittää HTML-taulukon sisältö?

Kuinka keskittää HTML-taulukon sisältö?

Tässä artikkelissa näemme, miten kohdista taulukon sisältö keskelle . CSS:n text-align-ominaisuutta voidaan käyttää tietyn säilön tai elementin sisällön tasaamiseen.

Voit tasata taulukon sisällön keskelle käyttämällä CSS:n text-align-ominaisuutta. Elementtitaulukkoa voidaan muotoilla text-align-ominaisuuden avulla ja arvo keskipisteenä johtaa haluttuun ratkaisuun. Oletuksena tekstin tasausominaisuus on asetettu vasemmalle, joten sisältö tasataan vasemmalle. Ohitamme tämän ominaisuuden arvon keskelle tasatakseen sisällön vaatimuksemme mukaisesti.

Syntaksi:

text-align: left; 

Omaisuuden arvo:

Arvot

Kuvaus

alkukirjain

Se on oletusarvo.

inherit

Se asettaa arvon yläelementin ominaisuuden arvoksi.

vasemmalle

Tasaa tekstin vasemmalle (oletusominaisuus).

oikein

Tasaa tekstin oikealle.

keskusta

Tasaa tekstin keskelle.

perustella

Se venyttää elementin sisältöä.

Esimerkki 1:

HTML




> <> html> lang> => 'en'> >>> <> meta> charset> => 'UTF-8'> >>>

>   

Lähtö:

Kuvakaappaus-2023-12-20-133732

Esimerkki 2:

HTML




> <> html> lang> => 'en'> >>> <> meta> charset> => 'UTF-8'> >>> > content> => 'width=device-width, initial-scale=1.0'> >>> h1{> > color: green;> > text-align: center;> > }> > table {> > margin: auto;> > border-collapse: collapse;> > }> > td {> > border: 1px solid black;> > padding: 10px;> > justify-content: center;> > text-align: center;> > align-items: center;> > }> > style> techcodeview.comtitle> head> <body> <h1 style=''>techcodeview.com h1> <table class="table"> <tr> <td>R1, C1td> <td>R1, C2td> <td>R1, C3td> tr> <tr> <td>R2, C1td> <td>R2,C2td> <td>R2, C3td> tr> <tr> <td>R3, C1td> <td>R3, C2td> <td>R3, C3td> tr> taulukko> body> html>> </code> </td> </tr> </tbody> </table> <p> </p> <i id='output-icon' title='Output'> </i> <p> </p> <p> </p> <i id='copy-url-button' title='Copy Generated Ide URL'> </i> <p> </p> <p> </p> <p dir='ltr'> <b> <strong>Lähtö: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/html-questions/85/how-center-contents-an-html-table-2.webp' alt='Kuvakaappaus-2023-12-20-134524'> </p> <br> <br> </div> <!-- Article Footer with Prominent Share Buttons --> <div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50"> <div class="flex flex-col sm:flex-row items-center justify-between gap-6"> <h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2"> <i class="fa fa-share-alt text-tech-500"> </i> Jakaa </h4> <div class="flex flex-wrap justify-center gap-3"> <!-- Twitter --> <a href="https://twitter.com/intent/tweet?text=Kuinka keskittää HTML-taulukon sisältö?&url=https://www.techcodeview.com/fi/how-center-contents-an-html-table" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm"> <i class="fa fa-twitter text-lg"> </i> <span class="hidden sm:inline">Twitter </span> </a> <!-- Facebook --> <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/fi/how-center-contents-an-html-table" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm"> <i class="fa fa-facebook text-lg"> </i> <span class="hidden sm:inline">Facebook </span> </a> <!-- LinkedIn --> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/fi/how-center-contents-an-html-table&title=Kuinka keskittää HTML-taulukon sisältö?" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm"> <i class="fa fa-linkedin text-lg"> </i> <span class="hidden sm:inline">LinkedIn </span> </a> </div> </div> </div> </article> <!-- Comments Placeholder / Random Articles --> <div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm"> <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2"> Saatat Pitää </h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="group"> <a href="/fi/what-is-nbsp" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3"> <img loading="lazy" src="https://techcodeview.com/img/computer/39/what-is-nbsp.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mikä on NBSP (Non-breaking Space)?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> </a> <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors"> <a href="/fi/what-is-nbsp">Mikä on NBSP (Non-breaking Space)? </a> </h4> </div> <div class="group"> <a href="/fi/type-casting-java" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3"> <img loading="lazy" src="https://techcodeview.com/img/java-tutorial/20/type-casting-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kirjoita Casting Javassa" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> </a> <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors"> <a href="/fi/type-casting-java">Kirjoita Casting Javassa </a> </h4> </div> </div> </div> </div> <!-- SECONDARY COLUMN (SIDEBAR) --> <!-- Aside Column --> <div class="lg:col-span-4 space-y-8"> <!-- Best Articles Widget --> <div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm"> <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2"> <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center"> <span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span> Top Artikkelit </h2> </div> <!-- Owl Carousel Preserved Container --> <div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav"> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/fi/how-play-imessage-games-an-android-phone"> <img src="https://techcodeview.com/img/android-tutorial/21/how-play-imessage-games-an-android-phone.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kuinka pelata iMessage-pelejä Android-puhelimella" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/fi/how-play-imessage-games-an-android-phone" class="hover:text-tech-500 transition-colors line-clamp-3">Kuinka pelata iMessage-pelejä Android-puhelimella </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/fi/python-lists"> <img src="https://techcodeview.com/img/python-list/66/python-lists.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Python-listat" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/fi/python-lists" class="hover:text-tech-500 transition-colors line-clamp-3">Python-listat </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/fi/what-is-world-wide-web"> <img src="https://techcodeview.com/img/seo-tutorial/94/what-is-world-wide-web.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mikä on World Wide Web?" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/fi/what-is-world-wide-web" class="hover:text-tech-500 transition-colors line-clamp-3">Mikä on World Wide Web? </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/fi/how-fix-session-has-expired-error-internet"> <img src="https://techcodeview.com/img/computer/54/how-fix-session-has-expired-error-internet.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kuinka korjata Istunto on vanhentunut -virhe Internetissä?" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/fi/how-fix-session-has-expired-error-internet" class="hover:text-tech-500 transition-colors line-clamp-3">Kuinka korjata Istunto on vanhentunut -virhe Internetissä? </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/fi/types-encoding-techniques"> <img src="https://techcodeview.com/img/machine-learning/77/types-encoding-techniques.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Koodaustekniikoiden tyypit" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/fi/types-encoding-techniques" class="hover:text-tech-500 transition-colors line-clamp-3">Koodaustekniikoiden tyypit </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/fi/how-use-sql"> <img src="https://techcodeview.com/img/sql-tutorial/25/how-use-sql.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="IN:n käyttäminen SQL:ssä" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/fi/how-use-sql" class="hover:text-tech-500 transition-colors line-clamp-3">IN:n käyttäminen SQL:ssä </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/fi/header-files-c"> <img src="https://techcodeview.com/img/c-library/29/header-files-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Otsikkotiedostot C:ssä" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/fi/header-files-c" class="hover:text-tech-500 transition-colors line-clamp-3">Otsikkotiedostot C:ssä </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/fi/open-source-operating-system"> <img src="https://techcodeview.com/img/operating-system/35/open-source-operating-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Avoimen lähdekoodin käyttöjärjestelmä" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/fi/open-source-operating-system" class="hover:text-tech-500 transition-colors line-clamp-3">Avoimen lähdekoodin käyttöjärjestelmä </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/fi/how-graduate-high-school-early-1311064"> <img src="https://techcodeview.com/img/blog/39/how-graduate-high-school-early.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Lukion varhainen valmistuminen: 5 avainvaihetta" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/fi/how-graduate-high-school-early-1311064" class="hover:text-tech-500 transition-colors line-clamp-3">Lukion varhainen valmistuminen: 5 avainvaihetta </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/fi/what-is-10-100"> <img src="https://techcodeview.com/img/maths/83/what-is-10-100.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mikä on 10 % 100:sta" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/fi/what-is-10-100" class="hover:text-tech-500 transition-colors line-clamp-3">Mikä on 10 % 100:sta </a> </h4> </div> </article> <!-- /ARTICLE --> </div> <!-- Categories --> <div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2"> <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Luokka </h2> </div> <div class="flex flex-wrap gap-2"> <a href="/fi/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Blogi </a> <a href="/fi/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Java-Muunnos </a> <a href="/fi/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Matematiikka </a> <a href="/fi/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Java-Kokoelmat </a> <a href="/fi/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Erot </a> <a href="/fi/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Java-Merkkijono </a> </div> <!-- Interesting Articles Widget --> <div class="mt-8"> <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2"> <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Mielenkiintoisia Artikkeleita </h2> </div> <div id="owl-carousel-4" class="owl-carousel owl-theme"> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/dynamic-programming/78/minimum-sum-path-in-3-d-array.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Minimisummapolku 3-D-taulukossa" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/fi/dynamic-programming/">Dynaaminen ohjelmointi </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/minimum-sum-path-in-3-d-array">Minimisummapolku 3-D-taulukossa </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/discrete-mathematics/42/hasse-diagrams.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hassen kaaviot" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/fi/discrete-mathematics/">Diskreetti Matematiikka </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/hasse-diagrams">Hassen kaaviot </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/linux-tutorial/06/open-file-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Avaa tiedosto Linuxissa" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/fi/linux-tutorial/">Linux Opetusohjelma </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/open-file-linux">Avaa tiedosto Linuxissa </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/powershell-tutorial/48/powershell-run-administrator.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="PowerShell toimii järjestelmänvalvojana" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/fi/powershell-tutorial/">Powershell Opetusohjelma </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/powershell-run-administrator">PowerShell toimii järjestelmänvalvojana </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/java-conversion/85/java-convert-boolean-string.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java Muunna boolen arvo merkkijonoksi" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/fi/java-conversion/">Java-Muunnos </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/java-convert-boolean-string">Java Muunna boolen arvo merkkijonoksi </a> </h4> </div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/python-matplotlib/61/graph-plotting-python-set-1.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaaviopiirros Pythonissa | Sarja 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/fi/python-matplotlib/">Python-Matplotlib </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/fi/graph-plotting-python-set-1">Kaaviopiirros Pythonissa | Sarja 1 </a> </h4> </div> </article> <!-- /ARTICLE --> </div> </div> </div> </div> <!-- /Aside Column --> </div> </div> </div> <footer class="site-footer"> <div class="container"> <span class="footer-links"> Copyright ©2026 Kaikki Oikeudet Pidätetään | <a href="//www.techcodeview.com/lv/">techcodeview.com </a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vastuuvapauslauseke </a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Meistä </a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Tietosuojakäytäntö </a> </span> </div> </footer> <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script> <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script> <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script> <script> !function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=` #toTopBtn { position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } #toTopBtn:hover { background-color: #0284c7; } `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}(); </script> </body> </html>