Sarlavha misollari
"Jadval tuzish - oddiy jadval"
Download 271.92 Kb.
|
HTML
|
"Jadval tuzish - oddiy jadval"
Jadval tuzish uchullarini o’rganishni, eng oddiy jadval yaratishdan boshlaymiz. Biz tuzmoqchi bo'lgan jadval uchta ustundan iborat bo'ladi va har bir ustunda 3 tadan yacheykalar o'rin oladi. Jadvalning birinchi ustunini "Mahsulot", ikkinchisini esa - "Rangi", uchunchisini- "Narhi" deb nomlaymiz. Biz tuzgan jadval mana bunday ko'rinishda bo'ladi: Dastur kodi: 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>Documenttitle> <style> ul { display: flex; justify-content: center; align-items: center; } li { margin-right: 30px; list-style: none; } .text { display: flex; } style> head> <body> <table width="1200px" border="1" height="1000px" align="center"> <tr> <td class="knopka" height="60px" colspan="3"> <ul> <li><a href="#">Bosh sahifaa>li> <li><a href="#">Biz haqimizdaa>li> <li><a href="#">Xizmatlara>li> <li><a href="#">Portfolioa>li> <li><a href="#">Boglanisha>li> ul> td> tr> <tr> <td width="20%"> <h3>Songi yangiliklarh3> <hr> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta quos, delectus soluta labore fugiat praesentium.p> <hr> Lorem ipsum dolor sit amet. td> <td width="60%"> <h3>Audio kitobh3> <audio controls src="Bojalar_Ziyoda_feat_Tohir_Sodiqov-Yonimizda.ru.mp3">audio> <hr> <h3>Yangiliklar1h3> <div class="text"> <img src="book.jpg" alt=""> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus officiis vitae voluptate, fugiat tenetur vero, dignissimos aliquam fuga odio quidem nemo recusandae illo inventore, temporibus explicabo expedita molestiae! Quam, possimus. Aliquid, atque velit error sint inventore commodi enim nemo perspiciatis modi! Ut sequi vero tempore nihil, necessitatibus omnis, veniam quasi ab in consectetur laboriosam commodi suscipit maiores, aspernatur quia. Doloremque.p> div> <a href="#" style="text-align: right;">Batafsila> <hr> <h3>Yangiliklar1h3> <div class="text"> <img src="book.jpg" alt=""> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus officiis vitae voluptate, fugiat tenetur vero, dignissimos aliquam fuga odio quidem nemo recusandae illo inventore, temporibus explicabo expedita molestiae! Quam, possimus. Aliquid, atque velit error sint inventore commodi enim nemo perspiciatis modi! Ut sequi vero tempore nihil, necessitatibus omnis, veniam quasi ab in consectetur laboriosam commodi suscipit maiores, aspernatur quia. Doloremque.p> div><a href="#" style="text-align: right;">Batafsila> td> <td width="20%"> <h3>Videoh3> <video controls width="100%" src="video_2022-02-10_20-23-04.mp4">video> td> tr> table> body> Natija: Dastur kodi: 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>Task 1title> head> <body> <table border="1" width="300"> <thead> <tr> <th>Columu 1th> <th>Columu 2th> <th>Columu 3th> tr> thead> <tbody> <tr> <td rowspan="2">Row 1 Cell 1td> <td>Row 1 Cell 2td> <td>Row 1 Cell 3td> tr> <tr> <td>Row 2 Cell 2td> <td>Row 2 Cell 3td> tr> <tr> <td colspan="3">Row 3 Cell 1td> tr> tbody> table> body> html> Natija: Dastur kodi: 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>Task 2title> head> <body> <table border="1" width="100%"> <thead> <tr> <th colspan="2">Students Details th> <tr> <tr> <th>Firstnameth> <th>Listnameth> tr> thead> <tbody> <tr> <td>Buritd> <td>Shanthitd> tr> <tr> <td>Bharattd> <td>Saitd> tr> tbody> table> body> html> Natija: Download 271.92 Kb. Do'stlaringiz bilan baham: 
|