Untitled

Anonymous
304 x views • 4 years ago
        <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tugas Membuat Tabel Pada HTML</title>

</head>



<style>

 h1{

    font-family: sans-serif;

  }

  

  table {

    text-align: center;

    font-family: Arial, Helvetica, sans-serif;

    color: #666;

    text-shadow: 1px 1px 0px #fff;

    background: #eaebec;

    border: #ccc 1px solid;

  }

  

  table th {

    padding: 15px 35px;

    border-left:1px solid #e0e0e0;

    border-bottom: 1px solid #e0e0e0;

    background: #ededed;

  }

  

  table th:first-child{  

    border-left:none;  

  }

  

  table tr {

    text-align: center;

    padding-left: 20px;

  }

  

  table td:first-child {

    text-align: center;

    padding-left: 20px;

    border-left: 0;

  }

  

  table td {

    padding: 15px 35px;

    border-top: 1px solid #ffffff;

    border-bottom: 1px solid #e0e0e0;

    border-left: 1px solid #e0e0e0;

    background: #fafafa;

    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));

    background: -moz-linear-gradient(top, #fbfbfb, #fafafa);

  }

  

  table tr:last-child td {

    border-bottom: 0;

  }

  

  table tr:last-child td:first-child {

    -moz-border-radius-bottomleft: 3px;

    -webkit-border-bottom-left-radius: 3px;

    border-bottom-left-radius: 3px;

  }

  

  table tr:last-child td:last-child {

    -moz-border-radius-bottomright: 3px;

    -webkit-border-bottom-right-radius: 3px;

    border-bottom-right-radius: 3px;

  }

  

  table tr:hover td {

    background: #f2f2f2;

    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));

    background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);

  }     

</style>

<body>



    <center><h1>Membuat Tabel Dengan HTML</h1></center>

	<table align="center" cellspacing='0'>

		<thead>

			<tr>

				<th>Nama Anggota</th>

				<th>Alamat</th>

				<th>Pekerjaan</th>

				<th>Usia</th>

			</tr>

		</thead>

		<tbody>

			<tr>

				<td>Muh. Ulil Amri</td>

				<td>Bulukumba</td>

				<td>Web Designer</td>

				<td>19</td>

			</tr>

			<tr>

				<td>Muh. Al Iqram Marzah</td>

				<td>Buton</td>

				<td>Web Developer</td>

				<td>19</td>

			</tr>

			<tr>

				<td>Farid Kusuma Wardana</td>

				<td>Makassar</td>

				<td>Web Programmer</td>

				<td>21</td>

			</tr>

			<tr>

				<td>Muhammad Adil Syaputra</td>

				<td>Sidrap</td>

				<td>Teknisi</td>

				<td>20</td>

			</tr>

		</tbody>

	</table>



</body>

</html>