Pengenalan Code HTML Membuat Table Sederhana

Pengenalan Code HTML Membuat Table Sederhana. Hai ! Tutorial lalu kita sudah mempelajari tentang Pengenalan Code HTML Google Icons jika anda ingin lebih jelas mengenal HTML anda bisa mengunjungi halaman berikut : https://www.dicloud.id/tutorial/categories/perkenalan-html , disini kita akan mempelajari tentang Pengenalan Code HTML Membuat Table Sederhana , berikut penjelasannya :

disini kita akan mempelajari tentang Pengenalan Code HTML Membuat Table Sederhana , berikut penjelasannya :

Code HTML Membuat Table Sederhana

Disini saya akan memberikan contoh code HTML untuk menambahkan sebuah table sederhana pada web, berikut contoh nya :

<!DOCTYPE html>
<html>
<head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">


	<style type="text/css">
		
		.bg {
	font-family: 'Libre Franklin', sans-serif;
    font-size: 30px;
    background-color: #28e9ed;
    color: black;
    padding: 10px;
    text-align: justify;
    	}
    	.gd {
    border: 2px solid;
    border-color: #28e9ed;
    padding: 100px;
    color: #ffffff;
    background-image: url(text.jpg);	
    	}
    	.btn {
    background-color: #292cc6;
    padding: 10px;
    color: #ffffff;
    border: 14px;
    size: 13px;
    	}
    	.cmark{
    		background-color: #292cc6;
    	}
    	table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
		}
	td, th {
    border: 10px solid #dddddd;
    text-align: left;
    padding: 8px;
		}
	</style>
	<title>Test</title>
</head>
<body>
<h3 align="center"><i class="bg">What is Lorem Ipsum?</i></h3>
<p align="center"><i class="material-icons" style="font-size: 70px">wb_sunny</i></p>
<table>
  <tr>
    <th>NAMA</th>
    <th>TEMPAT</th> 
    <th>UMUR</th>
  </tr>
  <tr>
    <td>Agus</td>
    <td>Surabaya</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Andre</td>
    <td>Moyo</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Billy</td>
    <td>Bali</td>
    <td>30</td>
  </tr>
</table>

<blockquote class="gd"><h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<small>It has survived not only five centuries, <sup>but also the leap into electronic typesetting, remaining essentially unchanged.</small></sup>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h1>
</blockquote>


</body>
</html>

<!DOCTYPE html>

<html>

<head>

rel="stylesheet">

.bg {

font-family: 'Libre Franklin', sans-serif;

font-size: 30px;

background-color: #28e9ed;

color: black;

padding: 10px;

text-align: justify;

}

.gd {

border: 2px solid;

border-color: #28e9ed;

padding: 100px;

color: #ffffff;

background-image: url(text.jpg);

}

.btn {

background-color: #292cc6;

padding: 10px;

color: #ffffff;

border: 14px;

size: 13px;

}

.cmark{

background-color: #292cc6;

}

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 10px solid #dddddd;

text-align: left;

padding: 8px;

}

</style>

</head>

<body>

<h3 align="center"><i class="bg">What is Lorem Ipsum?</i></h3>

<p align="center"><i class="material-icons" style="font-size: 70px">wb_sunny</i></p>

<table>

<tr>

<th>TEMPAT</th>

</tr>

<tr>

<td>Surabaya</td>

</tr>

<tr>

<td>Andre</td>

</tr>

<tr>

<td>Billy</td>

</tr>

</table>

<blockquote class="gd"><h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<small>It has survived not only five centuries, <sup>but also the leap into electronic typesetting, remaining essentially unchanged.</small></sup>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h1>

</blockquote>

</body>

</html>

Dan akan menampilkan hasil berikut :

Pengenalan Code HTML Membuat Table Sederhana

Disini kita menggunakan elemen baru yaitu <table> , elemen ini digunakan untuk membuat sebuah table di website atau html , ada beberapa elemen didalamnya seperti <tr> atau row table disini digunakan untuk membuat sebuah row dan didalam nya pun ada seperti <th> table header dan <td> table data , table header digunakan untuk mengisi header table sedangkan table data digunakan untuk mengisi data data di dalam table , anda harus mengisi style pada table jika tidak maka table tidak terlihat karena tidak berisi border atau garis pada table.

Kesimpulan

Jika anda menambahkan table ingat isi css border untuk mengisi garis garis pada table .

Sekian Terima Kasih.

Author: Dicloud Support

Technical Support in dicloud.id

Panduan & Tutorial

Pengenalan Code HTML Membuat Table Sederhana