You can create a Bulma table simply by attaching a single table
CSS class on a <table>
HTML element with the following structure:
-
<table class="table">
as the main container
-
thead
the optional top part of the table
-
tfoot
the optional bottom part of the table
-
tbody
the main content of the table
-
tr
each table row
-
th
a table cell heading
-
td
a table cell
You can set a table row as selected by appending the is-selected
modifier on a <tr>
HTML
Modifiers
#
Add borders to all the cells.
table is-bordered
Add stripes to the table.
table is-striped
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
table is-narrow
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
You can add a hover effect on each row
table is-hoverable
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
You can have a fullwidth table.
table is-fullwidth
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
You can combine all five modifiers.
table is-bordered is-striped is-narrow is-hoverable is-fullwidth
One |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine |
Ten |
Eleven |
Twelve |
Table container
#
You can create a scrollable table by wrapping a table
in a table-container
element:
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
2 |
4 |
6 |
8 |
10 |
12 |
14 |
16 |
18 |
20 |
22 |
24 |
26 |
28 |
30 |
32 |
34 |
36 |
38 |
40 |
42 |
44 |
46 |
48 |
50 |
52 |
54 |
56 |
58 |
60 |
62 |
64 |
66 |
68 |
70 |
72 |
74 |
76 |
78 |
80 |
82 |
84 |
86 |
88 |
90 |
92 |
94 |
96 |
98 |
100 |
102 |
104 |
106 |
108 |
110 |
112 |
114 |
116 |
118 |
120 |
122 |
124 |
126 |
128 |
130 |
132 |
134 |
136 |
138 |
140 |
142 |
144 |
146 |
148 |
150 |
152 |
154 |
156 |
158 |
160 |
162 |
164 |
166 |
168 |
170 |
172 |
174 |
176 |
178 |
180 |
182 |
184 |
186 |
188 |
190 |
192 |
194 |
196 |
198 |
200 |
3 |
6 |
9 |
12 |
15 |
18 |
21 |
24 |
27 |
30 |
33 |
36 |
39 |
42 |
45 |
48 |
51 |
54 |
57 |
60 |
63 |
66 |
69 |
72 |
75 |
78 |
81 |
84 |
87 |
90 |
93 |
96 |
99 |
102 |
105 |
108 |
111 |
114 |
117 |
120 |
123 |
126 |
129 |
132 |
135 |
138 |
141 |
144 |
147 |
150 |
153 |
156 |
159 |
162 |
165 |
168 |
171 |
174 |
177 |
180 |
183 |
186 |
189 |
192 |
195 |
198 |
201 |
204 |
207 |
210 |
213 |
216 |
219 |
222 |
225 |
228 |
231 |
234 |
237 |
240 |
243 |
246 |
249 |
252 |
255 |
258 |
261 |
264 |
267 |
270 |
273 |
276 |
279 |
282 |
285 |
288 |
291 |
294 |
297 |
300 |
4 |
8 |
12 |
16 |
20 |
24 |
28 |
32 |
36 |
40 |
44 |
48 |
52 |
56 |
60 |
64 |
68 |
72 |
76 |
80 |
84 |
88 |
92 |
96 |
100 |
104 |
108 |
112 |
116 |
120 |
124 |
128 |
132 |
136 |
140 |
144 |
148 |
152 |
156 |
160 |
164 |
168 |
172 |
176 |
180 |
184 |
188 |
192 |
196 |
200 |
204 |
208 |
212 |
216 |
220 |
224 |
228 |
232 |
236 |
240 |
244 |
248 |
252 |
256 |
260 |
264 |
268 |
272 |
276 |
280 |
284 |
288 |
292 |
296 |
300 |
304 |
308 |
312 |
316 |
320 |
324 |
328 |
332 |
336 |
340 |
344 |
348 |
352 |
356 |
360 |
364 |
368 |
372 |
376 |
380 |
384 |
388 |
392 |
396 |
400 |
5 |
10 |
15 |
20 |
25 |
30 |
35 |
40 |
45 |
50 |
55 |
60 |
65 |
70 |
75 |
80 |
85 |
90 |
95 |
100 |
105 |
110 |
115 |
120 |
125 |
130 |
135 |
140 |
145 |
150 |
155 |
160 |
165 |
170 |
175 |
180 |
185 |
190 |
195 |
200 |
205 |
210 |
215 |
220 |
225 |
230 |
235 |
240 |
245 |
250 |
255 |
260 |
265 |
270 |
275 |
280 |
285 |
290 |
295 |
300 |
305 |
310 |
315 |
320 |
325 |
330 |
335 |
340 |
345 |
350 |
355 |
360 |
365 |
370 |
375 |
380 |
385 |
390 |
395 |
400 |
405 |
410 |
415 |
420 |
425 |
430 |
435 |
440 |
445 |
450 |
455 |
460 |
465 |
470 |
475 |
480 |
485 |
490 |
495 |
500 |
Variables
#
Name
Type
Value
Computed Value
Computed Type
variable
color
size
variable
color
size
variable
color
size
variable
color
string
string
string
variable
color
variable
color
variable
color
variable
color
variable
color