hai hai semuanya Jumpa lagi di channel skin solution pada video ini kita akan mempelajari mengenai cara membuat tabel pada halaman html tabel pada HTML mirip dengan tabel yang biasa kita buat pada Microsoft Word Excel ataupun PowerPoint di bagian tengah layar ini kita bisa melihat contoh tabel data karyawan yang berisi nama umur dan jabatan dari tiga orang karyawan bagian horizontal dari tabel disebut bro atau baris jadi di sini kita lihat bahwa Budi 35 dan direktur adalah satu baris perhitungan baris biasanya dimulai dari atas ke bawah jadi Budi 35 dan direktur adalah baris pertama Dewi 28 dan manajer adalah baris Kedua lelaki Rahmat 22 teknisi adalah baris ketiga sedangkan bagian vertikal dari tabel disebut cuma ada kolom dan biasanya kolom dihitung dari kiri ke kanan jadi contoh yang kita lihat di sini Budi Dewi dan Ahmad adalah kolom pertama 35 2822 adalah kolom kedua direktur manajer dan teknisi adalah kolom Ketiga satu bagian dari tabel disebut dengan nama table data atau Steele di dalam tabel ini kita bisa mendapatkan 9 buah table data atau sel jadi di sini bisa kita lihat bahwa Budi adalah satu sel dan kemudian 35 adalah satu sel dan seterusnya biasanya tabel juga dilengkapi dengan header untuk menerangkan maksud dari datanya pada contoh di sini header dari tabel dituliskan secara horizontal atau menggunakan baris pertama contoh berikutnya adalah header yang ditulis secara vertikal atau menggunakan kolom pertama dari tabel ada juga tabel yang menggunakan dua header sekaligus satu itu Listy jontal dan satunya lagi ditulis secara vertikal seperti contoh yang kita lihat disini adalah tabel jam kerja dari karyawan Sekarang kita mulai coding disebelah kiri saya sudah membuatkan file baru dengan nama table d'hote email dan saya sudah isikan dengan boilerplate diri dari sedang fokus bagian bodi dan kita akan membuat tabel seperti contoh pada sebelah kanan kita akan mulai dengan tabel pertama untuk membuat sebuah tabel dengan menggunakan tag table ingat ya tebel dalam bahasa Inggris dengan salah menuliskan tabel dalam bahasa Indonesia karena tidak akan dikenal oleh browser selanjutnya di dalam tabel kita tambahkan teks TR yang singkatan dari teberau Artinya kita membuat baris pertama ingat bahwa aturan penulisan baris kita mulai dari atas ke bawah kalau kita lihat baris pertama pada contoh tabel dan artinya kita sedang menuliskan baris paling atas ya isinya Budi 35 dan direktur di dalam TDR kita tambahkan teks tdci kenal dari table data Artinya kita akan menuliskan isi dari masing-masing sel di dalam tabel yang berada di dalam baris pertama di dalam baris pertama ada tiga buah sel ya berarti kita membuat TD pertama untuk Budi titik dua untuk 35 dan tidak ketiga untuk direktur kita simpan dan kita coba lihat hasilnya di browser sebenarnya sudah ada sebuah tabel Hanya saja karena belum ada garisnya jadi kita lihat bentuknya seperti konten biasa kita tambahkan early Bird bordir semangat satu pada table tidak refresh Browser Hai Kan kita bisa melihat tabel yang kita buat sudah memiliki kotak yang bentuknya seperti situs lama di tahun 90-an perlu diingat bahwa sekarang atribut border sudah tidak digunakan lagi ya karena kita bisa membuat kotak yang bentuknya jauh lebih menarik dengan menggunakan CSS tidak kembali ke kode kita dan kita tambahkan TR untuk baris kedua kita isikan datanya nanti dedewi 28 dan manajer dan kita Tambahkan lagi TRD baris ketiga dengan istrinya TD Ahmad 22 dan teknisi kita tambahkan dahulu header 3 sebelum table yang tidak berjudul contoh tabel pertama Hai dari flash Browser dan kita sudah mendapatkan tabel yang sesuai dengan contoh kita lanjut ke contoh double kedua kalau kita bandingkan dengan tabel pertama perbedaannya hanya pada tabel kedua terdapat header pada baris paling atasnya kita akan belajar mengenai cara menambahkan header pada tabel di hai pertama kita copy dahulu kode dari tabel pertama kita PES dan kita ubah judulnya menjadi contoh tabel kedua Ayo kita hendak menambahkan baris yang berada dipaling atas maka kita tambahkan teks TR langsung setelah tag pembuka table berhubung yang kita tambahkan disini adalah header dari tabel maka kita tidak menggunakan TD Black menggunakan tag pH yang singkatan dari table header tidak tambahkan 3 buah th yang pertama TH6 lalu th umur dan yang terakhir DH jabatan tidak litres dokter dan kita sedang dapatkan tabel yang sesuai dengan contoh selanjutnya kita akan belajar mengenai elemen di head dan tiba di dari table mirip dengan teks html yang sudah kita pelajari sebelumnya Kalau di dalam teks html kita harus mengisikan dengan tag head dan tag body Sedangkan di dalam Stable kita bisa menambahkan Tag net dan tag tiba di Etihad akan diisikan dengan baris header dalam tabel kita adalah baris pertama yang isinya menggunakan tag th ledakan tag tiba di diisikan garis yang isinya data yang menggunakan teknik PD jadi struktur dari teks table yang benar adalah seperti ini dan kalau dari flash di browser bisa kita lihat bahwa isinya sama ya kalau gitu sekarang pertanyaannya adalah Apa gunanya menggunakan tiket dan tiba di seperti yang sudah saya jelaskan sebelumnya di dalam HTML5 kita sangat menekankan bahwa html adalah struktur dari content Hai jadi dengan menambahkan tag pihak dan tiba di pada table kita menjelaskan struktur dari tabel kita inibadalah bagian kepalanya dan ini adalah bagian badannya dan struktur ini akan sangat berguna bagi software yang sedang membaca html dan struktur ini akan sangat berguna bagi software yang sedang membaca kode html kita seperti browser atau software pembaca konten otomatis atau software lainnya mereka akan lebih aware terhadap keberadaan tell header dan dapat menyesuaikan fungsinya kegunaan lain dari teh pihak dan tiba di adalah untuk keperluan kita sendiri sebagai front-end developer nantinya Setelah mempelajari CSS dan javascript mungkin saja ada kebutuhan kita untuk menunjuk bagian-bagian tertentu dari tabel kita misalnya kita mau memasang horizontal scrollbar tapi hanya di bagian badan saja ledakan kita mau bagian kepala tabel harus tetap kelihatan walaupun kita sedang Scroll ke bagian bawah untuk mengimplementasikan kode seperti ini Nda akan memerlukan teknik head dan tiba di selanjutnya kita akan membuat contoh tabel ketiga tidak bisa lihat dicontoh ini bahwa tabel ketika menggunakan header secara vertikal yang berada di kolom pertama kita buat dahulu tag header 3 dengan isi contoh tabel 30 kita buat table cara membuat tabel seperti ini tetap sama seperti cara membuat tabel lainnya ya kita tetap membuat PR terlebih dahulu dan isi TR pertama adalah baris yang paling atas bisa kita lihat di contoh tabel bahwa isi baris pertama kolom pertama adalah headernya dengan konten nama maka kita tambahkan teh nama setelah itu diikuti dengan TD Budi Teh Dewi dan TD Ahmad Hai kemudian kita dambakan PR untuk baris kedua yang isinya adalah PH umur lalu TD 35.8 dan t22 dan kita tambahkan TR terakhir yang isinya th jabatan Dede direktur Eddy manajer dan teknisi perhatikan disini bahwa untuk header vertikal kita tidak bisa menggunakan lihat dan tiba di ya Hal ini disebabkan karena cara menuliskan tabel harus daftarkan baris dari atas kebawah sedangkan header kita berada di setiap barisnya Hai tidak refresh Browser dan kita lihat hasilnya sudah sesuai dengan contoh tabel ya selanjutnya kita akan membuat contoh tabel keempat di layar kita bisa melihat bahwa tabel keempat memiliki dua header ya header horizontal pada baris pertama dan header vertikal pada kolom ternama Nah untuk latihan dari materi ini silahkan post terlebih dahulu video ini dan coba untuk membuat tabel keempat kelima dan keenam sebagai bocoran ditabel kelima kita akan menggunakan atribut could spend sedangkan ditabrak 6 kita akan menggunakan atribut prospen silakan pos terlebih dahulu dan coba Kerjakan sendiri Saya akan kembali lagi untuk mengajarkan solusinya ya cewek Oke sekarang kita akan membahas mengenai cara membuat tabel keempat pertama kita tambahkan dahulu header 3 dengan judul contoh tabel keempat atau tidak buat Neng table Etihad kita tambahkan PR dan kita isikan dengan empat buah th-th pertama adalah kosong pihak kedua adalah Budi pihak ketiga Dewi nanti ha Terakhir Ahmad lalu tidak pergi ke setelah penutup lihat kita tambahkan teh baru tiba di dan kita tambahkan PR untuk baris ke-2 kolom pertama dari baris kedua adalah header dengan konten Senin kita tambahkan dahulu th Senin lah itu kita tambahkan TD 08.30 Hai lanjutnya isi datanya sama jadi kita copy pesta jauh dari yang sebelumnya rezeki tidak tambahkan TD dengan data 1330 hingga 2130 kidal copy PR Senin dan Kita Pe sebanyak empat kali lalu kita ubah TR ketiga dan ubah bagian headernya menjadi Selasa di kolom ketiga kita Ubah menjadi libur lalu kita langsung menuju TR keempat header menjadi Rabu lalu TR kelima dengan header menjadi Kamis dan kolom kedua menjadi libur ya Ndut nanti daughter terakhir headernya menjadi Jumat Udah selesai dan kita lihat hasilnya di browser kita tambahkan border Oke sudah sesuai dengan contoh ya selanjutnya kita akan membuat tabel kelima tambah kelima ini akan menggunakan atribut colspan yang fungsinya untuk Menggabungkan beberapa kolom menjadi satu sel kalau kita perhatikan lagi bagian header telepon ini sebenarnya menggunakan dua kolom yang digabung menjadi satu begitu juga kita melihat baris ketiga yaitu nomor telepon dari Dewi untuk membuat tabel seperti ini pertama kita tambahkan dahulu header 3 dengan konten contoh tabel halo halo kita tambahkan teh table Dan tambahkan adboard semangat satu ditambahkan di head PR untuk baris pertama dan kita tambahkan th pertama nama pihak kedua umur mph ketiga telepon perhatikan bahwa pihak ketiga ini adalah gabungan dari dua kolom Oleh karena itu kita tambahkan Evercoss Spensa mendua kita lanjutkan tiba di seperti biasa menggunakan TR mendapatkan B baru kalau kita isikan datanya Hai Dede Budi tidak 35 jadi 21 dan TDK 0811 kita tambahkan Teh lagi isinya adalah Dewi lalu TDK 28 dan tuh data ketika berhubung kita perlu menggabungkan dua kolom menjadi satu sel maka kita membuat TD dengan ati.com Spensa dengan dua tradisi adalah 022 ntr berakhir seperti biasa isinya TD Ahmad pd22 titik 023 dan TD udah selesai dan kita lihat hasilnya pada browser udah sesuai contoh ya kalau kita akan membahas mengenai tabel keenam tebel keenam sebenarnya sama dengan kabel kelima hanya saja kita Puter dari tadinya horizontal menjadi vertikal jadi Nadia menggunakan kaus pen sekarang menjadi Rose pen karena kita Menggabungkan beberapa baris menjadi satu sel namun untuk menuliskan kode tabelnya akan sedikit lebih rumit daripada tabel kelima tanaman kita buat dahulu header 3 dengan konten contoh tabel 16 Hai Hello Kitty Black table border kandungan satu kita tambahkan TRD baris pertama dan kita isikan konten dengan TH6 Mak Dede Budi dedewi dan Dede Ahmad biar kedua isi juga sama seperti ini telah kita pelajari kita tambahkan teh umur id35 ide 28 dan td20 20.4 Hai Dr ketiga sedikit lebih rumit karena kolom pertama yang merupakan headernya menggabungkan dua baris menjadi satu sel dan kolom ketiga juga menggabungkan dua baris menjadi satu sel Jadi pertama kita buat dahulu th dengan atribut prospen = 2 kita isikan dengan telepon lalu kita buat td02 satu dan gede buat lagi TD enggak tidur terus Spensa makan2 dengan isi 022 dan terakhir kita buat td02 tiga udah lanjutkan ntr tempat namun disini kita hanya menyisihkan 2td saja ya itu nomor telepon Budi dan Ahmad jadi kita tambahkan td08 11 dan tips 8 13 kita simpan dan kita lihat hasilnya pada browser Oke kita udah berhasil membuat tabel seperti contoh di Ayo kita review kembali apa yang telah kita pelajari pada video ini kita telah mempelajari mengenai elemen table yang digunakan untuk membuat tabel lalu elemen lihat yang digunakan untuk menandakan bagian kepala dari tabel sedangkan elemen tiba di digunakan untuk menandakan bagian badan dari tabel elementer digunakan untuk membuat baris di dalam tabel elemen th digunakan untuk membuat header di dalam baris dan yang terakhir Element TD yang fungsinya untuk membuat data di dalam baris selanjutnya ada 2ed yang bisa kita gunakan di elemen pede dan th yang pertama adalah colspan yang berfungsi untuk Menggabungkan beberapa kolom menjadi satu sel dan yang kedua adalah raspand yang berfungsi untuk Menggabungkan beberapa baris menjadi satu sel Oke sampai di sini dulu video kita kali ini jangan lupa subscribe ke channel scan solution untuk mendapatkan informasi terbaru dari kami dan sampai bertemu lagi di video-video ikutnya Oh maaf ya