ID | First Name | Last name | Address |
---|---|---|---|
1 | Petrina | Abbie | 4603 pine dr |
2 | ida | gutierrez | 1838 poplar dr |
3 | valerie | cox | 6250 harrison ct |
4 | denise | martin | 1702 auerbach ave |
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Petrina</td>
<td>Abbie</td>
<td>4603 pine dr</td>
</tr>
<tr>
<td>2</td>
<td>ida </td>
<td>gutierrez</td>
<td>1838 poplar dr</td>
</tr>
<tr>
<td>3</td>
<td>valerie </td>
<td>cox</td>
<td>6250 harrison ct </td>
</tr>
<tr>
<td>4</td>
<td>denise </td>
<td>martin</td>
<td>1702 auerbach ave</td>
</tr>
</tbody>
</table>
table.table
thead
tr
th ID
th First Name
th Last name
th Address
tbody
tr
td 1
td Petrina
td Abbie
td 4603 pine dr
tr
td 2
td ida
td gutierrez
td 1838 poplar dr
tr
td 3
td valerie
td cox
td 6250 harrison ct
tr
td 4
td denise
td martin
td 1702 auerbach ave
ID | First Name | Last name | Address |
---|---|---|---|
1 | Petrina | Abbie | 4603 pine dr |
2 | ida | gutierrez | 1838 poplar dr |
ID | First Name | Last name | Address |
---|---|---|---|
1 | Petrina | Abbie | 4603 pine dr |
2 | ida | gutierrez | 1838 poplar dr |
ID | First Name | Last name | Address |
---|---|---|---|
1 | Petrina | Abbie | 4603 pine dr |
2 | ida | gutierrez | 1838 poplar dr |
<table class="table is-small">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Petrina</td>
<td>Abbie</td>
<td>4603 pine dr</td>
</tr>
<tr>
<td>2</td>
<td>ida </td>
<td>gutierrez</td>
<td>1838 poplar dr</td>
</tr>
</tbody>
</table>
<table class="table is-normal">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Petrina</td>
<td>Abbie</td>
<td>4603 pine dr</td>
</tr>
<tr>
<td>2</td>
<td>ida </td>
<td>gutierrez</td>
<td>1838 poplar dr</td>
</tr>
</tbody>
</table>
<table class="table is-large">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Petrina</td>
<td>Abbie</td>
<td>4603 pine dr</td>
</tr>
<tr>
<td>2</td>
<td>ida </td>
<td>gutierrez</td>
<td>1838 poplar dr</td>
</tr>
</tbody>
</table>
table.table.is-small
thead
tr
th ID
th First Name
th Last name
th Address
tbody
tr
td 1
td Petrina
td Abbie
td 4603 pine dr
tr
td 2
td ida
td gutierrez
td 1838 poplar dr
table.table.is-normal
thead
tr
th ID
th First Name
th Last name
th Address
tbody
tr
td 1
td Petrina
td Abbie
td 4603 pine dr
tr
td 2
td ida
td gutierrez
td 1838 poplar dr
table.table.is-large
thead
tr
th ID
th First Name
th Last name
th Address
tbody
tr
td 1
td Petrina
td Abbie
td 4603 pine dr
tr
td 2
td ida
td gutierrez
td 1838 poplar dr
ID | First Name | Last name | Address |
---|---|---|---|
1 | Petrina | Abbie | 4603 pine dr |
2 | ida | gutierrez | 1838 poplar dr |
3 | valerie | cox | 6250 harrison ct |
4 | denise | martin | 1702 auerbach ave |
<table class="table is-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Petrina</td>
<td>Abbie</td>
<td>4603 pine dr</td>
</tr>
<tr>
<td>2</td>
<td>ida </td>
<td>gutierrez</td>
<td>1838 poplar dr</td>
</tr>
<tr>
<td>3</td>
<td>valerie </td>
<td>cox</td>
<td>6250 harrison ct</td>
</tr>
<tr>
<td>4</td>
<td>denise </td>
<td>martin</td>
<td>1702 auerbach ave</td>
</tr>
</tbody>
</table>
table.table.is-striped
thead
tr
th ID
th First Name
th Last name
th Address
tbody
tr
td 1
td Petrina
td Abbie
td 4603 pine dr
tr
td 2
td ida
td gutierrez
td 1838 poplar dr
tr
td 3
td valerie
td cox
td 6250 harrison ct
tr
td 4
td denise
td martin
td 1702 auerbach ave
ID | First Name | Last name | Address |
---|---|---|---|
1 | Petrina | Abbie | 4603 pine dr |
2 | ida | gutierrez | 1838 poplar dr |
3 | valerie | cox | 6250 harrison ct |
4 | denise | martin | 1702 auerbach ave |
<table class="table is-relaxed">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Petrina</td>
<td>Abbie</td>
<td>4603 pine dr</td>
</tr>
<tr>
<td>2</td>
<td>ida </td>
<td>gutierrez</td>
<td>1838 poplar dr</td>
</tr>
<tr>
<td>3</td>
<td>valerie </td>
<td>cox</td>
<td>6250 harrison ct <br/>6230 harrison ct<br/>6240 harrison ct</td>
</tr>
<tr>
<td>4</td>
<td>denise </td>
<td>martin</td>
<td>1702 auerbach ave</td>
</tr>
</tbody>
</table>
table.table.is-relaxed
thead
tr
th ID
th First Name
th Last name
th Address
tbody
tr
td 1
td Petrina
td Abbie
td 4603 pine dr
tr
td 2
td ida
td gutierrez
td 1838 poplar dr
tr
td 3
td valerie
td cox
td 6250 harrison ct
tr
td 4
td denise
td martin
td 1702 auerbach ave
ID | First Name | Last name | Address |
---|---|---|---|
1 | Petrina | Abbie | 4603 pine dr |
2 | ida | gutierrez | 1838 poplar dr |
3 | valerie | cox | 6250 harrison ct 6230 harrison ct 6240 harrison ct |
4 | denise | martin | 1702 auerbach ave |
<table class="table is-top">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Petrina</td>
<td>Abbie</td>
<td>4603 pine dr</td>
</tr>
<tr>
<td>2</td>
<td>ida </td>
<td>gutierrez</td>
<td>1838 poplar dr</td>
</tr>
<tr>
<td>3</td>
<td>valerie </td>
<td>cox</td>
<td>6250 harrison ct <br/>6230 harrison ct<br/>6240 harrison ct</td>
</tr>
<tr>
<td>4</td>
<td>denise </td>
<td>martin</td>
<td>1702 auerbach ave</td>
</tr>
</tbody>
</table>
table.table.is-center
thead
tr
th ID
th First Name
th Last name
th Address
tbody
tr
td 1
td Petrina
td Abbie
td 4603 pine dr
tr
td 2
td ida
td gutierrez
td 1838 poplar dr
tr
td 3
td valerie
td cox
td 6250 harrison ct
tr
td 4
td denise
td martin
td 1702 auerbach ave
ID | First Name | Last name | Address |
---|---|---|---|
1 | Petrina | Abbie | 4603 pine dr |
2 | ida | gutierrez | 1838 poplar dr |
3 | valerie | cox | 6250 harrison ct 6230 harrison ct 6240 harrison ct |
4 | denise | martin | 1702 auerbach ave |
<table class="table is-bottom">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Petrina</td>
<td>Abbie</td>
<td>4603 pine dr</td>
</tr>
<tr>
<td>2</td>
<td>ida </td>
<td>gutierrez</td>
<td>1838 poplar dr</td>
</tr>
<tr>
<td>3</td>
<td>valerie </td>
<td>cox</td>
<td>6250 harrison ct <br/>6230 harrison ct<br/>6240 harrison ct</td>
</tr>
<tr>
<td>4</td>
<td>denise </td>
<td>martin</td>
<td>1702 auerbach ave</td>
</tr>
</tbody>
</table>
table.table.is-bottom
thead
tr
th ID
th First Name
th Last name
th Address
tbody
tr
td 1
td Petrina
td Abbie
td 4603 pine dr
tr
td 2
td ida
td gutierrez
td 1838 poplar dr
tr
td 3
td valerie
td cox
td 6250 harrison ct
br
| 6230 harrison ct
br
| 6240 harrison ct
tr
td 4
td denise
td martin
td 1702 auerbach ave
Modifier | Description | Class |
---|---|---|
Size | changes the table size | .is-small .is-normal .is-large |
Striped | alternates the background of rows sequentially | .is-striped |
Center | aligns table content to the center | .is-center |
Relaxed | removes table vertical lines | .is-relaxed |
Top | vertically aligns table content to the top | .is-top |
Bottom | vertically aligns table content to the bottom | .is-bottom |
Middle | vertically aligns table content to the middle | .is-middle |