Tabele
Stefanescu Mihai 2 years ago Bootstrap
Acest articol face parte din cursul Toate lectiile Bootstrap.
Te poti inscrie la acest curs aici!
Bootstrap ne pune la discpozitie o serie de clase ce ne pot schimba modul in care arata un tabel in HTML.
Un table simplu
Putem crea un tabel normal si ii dam clasa “table” care ii va daun aspect ceva mai ingirjit.
<table class="table">
<thead>
<tr>
<th>Rand</th>
<th>Nume</th>
<th>Prenume</th>
<th>Limbaj</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Stefanescu</td>
<td>Mihai</td>
<td>PHP</td>
</tr>
<tr>
<td>2</td>
<td>Ionescu</td>
<td>George</td>
<td>C#</td>
</tr>
<tr>
<td>3</td>
<td>Popescu</td>
<td>Ion</td>
<td>Java</td>
</tr>
</tbody>
</table>
Tabel cu randuri colorate
In bootstrap putem face un tabel cu randuri de culori diferite foarte simplu , trebuie numai sa punem clasa table-striped la table.
<table class="table table-striped">
<thead>
<tr>
<th>Rand</th>
<th>Nume</th>
<th>Prenume</th>
<th>Limbaj</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Stefanescu</td>
<td>Mihai</td>
<td>PHP</td>
</tr>
<tr>
<td>2</td>
<td>Ionescu</td>
<td>George</td>
<td>C#</td>
</tr>
<tr>
<td>3</td>
<td>Popescu</td>
<td>Ion</td>
<td>Java</td>
</tr>
</tbody>
</table>
Tabel cu border pe margini
Pur si simplu adaugam si clasa table-bordered la tabel.
<table class="table table-bordered">
<thead>
<tr>
<th>Rand</th>
<th>Nume</th>
<th>Prenume</th>
<th>Limbaj</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Stefanescu</td>
<td>Mihai</td>
<td>PHP</td>
</tr>
<tr>
<td>2</td>
<td>Ionescu</td>
<td>George</td>
<td>C#</td>
</tr>
<tr>
<td>3</td>
<td>Popescu</td>
<td>Ion</td>
<td>Java</td>
</tr>
</tbody>
</table>
Tabel Condensed
Acest tip de tabel nu este altceva decat un tabel cu mai putin padding.
<table class="table table-condensed">
<thead>
<tr>
<th>Rand</th>
<th>Nume</th>
<th>Prenume</th>
<th>Limbaj</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Stefanescu</td>
<td>Mihai</td>
<td>PHP</td>
</tr>
<tr>
<td>2</td>
<td>Ionescu</td>
<td>George</td>
<td>C#</td>
</tr>
<tr>
<td>3</td>
<td>Popescu</td>
<td>Ion</td>
<td>Java</td>
</tr>
</tbody>
</table>
Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum
Stefanie
#
3 weeks ago
Hey! Do you know if they make any plugins to safeguard against hackers?
I'm kinda paranoid about losing everything
I've worked hard on. Any tips?
I'm really enjoying the theme/design of your website.
Do you ever run into any browser compatibility issues?
A couple of my blog audience have complained about my website not working correctly in Explorer but looks
great in Chrome. Do you have any ideas to help fix this issue?
I have read so many articles about the blogger lovers except this post is genuinely a good article, keep
it up.
🌪️ Discord
