WEBVTT

00:00:07.750 --> 00:00:12.690
In this video we're going to learn how to use bootstrap just tile tables.

00:00:12.690 --> 00:00:15.620
This creates a simple table to start.

00:00:15.870 --> 00:00:18.960
So you get to use the table tags.

00:00:20.310 --> 00:00:29.720
OK so are you going to have the first line and have a table row and inside the row and have table headers

00:00:29.730 --> 00:00:30.800
.

00:00:31.160 --> 00:00:33.830
You're going to have three columns.

00:00:33.960 --> 00:00:36.570
We need three table headers.

00:00:36.900 --> 00:00:50.100
For example the first one would be fill in make then model and finally start back.

00:00:51.010 --> 00:00:52.890
So I have another.

00:00:53.730 --> 00:01:01.490
And inside you can have some table data will need three for this one.

00:01:01.960 --> 00:01:03.060
Let's go for Apple

00:01:06.000 --> 00:01:14.640
iPhone 6 for instance and you can go for those two gigabytes.

00:01:14.830 --> 00:01:23.660
So this is duplicate this line of iPhone 5.

00:01:24.270 --> 00:01:28.200
Why is this iPhone 4.

00:01:29.030 --> 00:01:30.370
OK.

00:01:31.200 --> 00:01:38.780
So this is a basic ASML table with very basic starting with No no styling.

00:01:39.000 --> 00:01:49.330
So he can add some basic bootstrap styling using a pre-built class so the class is called a table.

00:01:49.890 --> 00:01:54.160
And what's going to happen is that we can see some basic styling now.

00:01:54.380 --> 00:01:56.640
So we have some light padding.

00:01:57.000 --> 00:02:01.110
And we've caught Also if you're page to page is going to work better.

00:02:01.170 --> 00:02:01.480
OK.

00:02:01.530 --> 00:02:07.310
So we've got some padding there and we've got some partisan so dividers as well.

00:02:07.720 --> 00:02:13.700
So for some reason we need to refresh the page so that we can see the deciding anyway.

00:02:14.190 --> 00:02:20.920
So now we're going to create another table we're just going to copy paste this table and then we to

00:02:20.950 --> 00:02:27.330
start using some more advanced styling classes.

00:02:27.420 --> 00:02:33.550
Ok so now we going to make the table striped.

00:02:33.570 --> 00:02:41.750
So by adding some zebra stripe striping to the table rows the class we need to use for that is table

00:02:41.790 --> 00:02:43.370
right.

00:02:44.320 --> 00:02:45.690
OK.

00:02:45.750 --> 00:02:48.660
Now we can can see the effects.

00:02:48.660 --> 00:02:52.970
So we have a zebra and zebra striping to the table rows.

00:02:52.980 --> 00:03:01.600
Also we can give the rows a Hovis States and the class we need to use for that table over.

00:03:02.430 --> 00:03:07.250
Now if you harbor on the table rows you can see the effect.

00:03:08.040 --> 00:03:10.160
OK.

00:03:10.230 --> 00:03:21.020
Another class will make the table more condensed so it will just take out some of the padding and well

00:03:21.380 --> 00:03:28.250
it will basically cut the cell padding in half and the table is going to become more condensed.

00:03:28.280 --> 00:03:35.110
The class is table condensed and he can see the effect straight away.

00:03:35.280 --> 00:03:36.300
All right.

00:03:36.300 --> 00:03:42.060
You can add borders to all the sides of the table and also to the cells of the table.

00:03:42.120 --> 00:03:47.010
The class is going to be table boarded.

00:03:47.220 --> 00:03:49.900
So you can see the effect that borders everywhere.

00:03:50.280 --> 00:03:51.080
All right.

00:03:51.590 --> 00:03:51.850
OK.

00:03:51.860 --> 00:04:02.880
So these are just a few classes we can use with the bootstrap to style tables and have a really nice

00:04:02.880 --> 00:04:05.220
looking table.

00:04:05.260 --> 00:04:12.360
So now let's have a look at the responsiveness of tables where we make the width of our viewport smaller

00:04:12.370 --> 00:04:12.670
.

00:04:12.960 --> 00:04:18.380
So in order to see that clearly we need a cell with too much content in it.

00:04:18.390 --> 00:04:26.080
So for example is how they sell and add more text in it for example.

00:04:26.630 --> 00:04:30.010
And it's the same thing for this one.

00:04:31.600 --> 00:04:32.690
OK.

00:04:33.090 --> 00:04:42.510
So if we decrease the width of the viewport normally the tables are going to scroll vertically.

00:04:42.570 --> 00:04:43.630
OK.

00:04:43.980 --> 00:04:50.690
Sometimes you may want to change hearts and make the table scroll horizontally rather than vertically

00:04:50.690 --> 00:04:50.720
.

00:04:50.710 --> 00:04:59.940
In small devices a good way to do that is by placing the whole table inside another div and give that

00:04:59.940 --> 00:05:03.450
Steve a class table responsive.

00:05:03.480 --> 00:05:04.080
So let's try that.

00:05:04.080 --> 00:05:10.840
So are you going to copy while it's going to create a diff.

00:05:11.640 --> 00:05:17.830
And so this Dave is going to be of class table responsive.

00:05:18.570 --> 00:05:21.320
And then we will place our table in sight.

00:05:21.960 --> 00:05:22.810
OK.

00:05:23.070 --> 00:05:23.490
OK.

00:05:23.550 --> 00:05:24.960
Is table responsive.

00:05:25.200 --> 00:05:25.640
OK.

00:05:25.830 --> 00:05:33.840
So if we decrease the width of the of the viewport we can see that the table is scrolling horizontally

00:05:34.140 --> 00:05:35.210
rather than vertically.

00:05:35.220 --> 00:05:38.640
So unlike the first table the second one is crawling horizontally.

00:05:38.820 --> 00:05:39.030
OK.

00:05:39.030 --> 00:05:43.590
And this is for small devices so anything under seven hundred sixty eight pixels