HTML darslari 6-dars.Jadvallar

Web dasturlash

Assalomu alaykum. HTML ni o’rganishda davom etamiz.
Ushbu darsimizda jadvallar bilan ishlashni o’rganib chiqamiz.

Jadvallar bilan ishlashimiz uchun biz

<table>

tegidan foydalanamiz.
Ya’ni:


<table>
<tr>
　　<td><td>
　　<td><td>
　　<td><td>
<tr>
<tr>
　　<td><td>
　　<td><td>
　　<td><td>
<tr>
<table>

Ko’rib turganingizdek

<table>

teglari bilan jadval yaratiladi va uni ichida
<tr>
va
<td>
teglarini ishlatyapti.
<tr>
— ushbu teg qatorga ajratish uchun ishlatiladi
<td>
— jadval qiymatlarini kiritish uchun va ajratilgan qatorlarni ustunlarga taqsimlash uchun ishlatiladi.
Bulardan tashqari <th>
tegi ham ishlatiladi, bu tegning vazifasi jadval ustunlarining sarlavhasi uchun ishlatiladi.

Misol:


<table style="width:300px">
<tr>  
  <td>Sardor</td>  
  <td>Dushamov</td>   
  <td>programmist</td>
</tr>
<tr>  
  <td>Eshmat</td>  
  <td>Toshmatov</td>   
  <td>dangasa</td>
</tr>
</table>

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Quyidagicha natijani ko’rishingiz mumkin:

Sardor	Dushamov	programmist
Eshmat	Toshmatov	dangasa

Hayron bo’lgandirsiz jadvalga unchalik o’xshamadi deb, tegining border atributu mavjud bo’lib, jadvalga chegara chizigini chizib beradi.
Misol:


<table style="width:300px" border="1">
<tr>  
  <td>Sardor</td>  
  <td>Dushamov</td>   
  <td>programmist</td>
</tr>
<tr>  
  <td>Eshmat</td>  
  <td>Toshmatov</td>   
  <td>dangasa</td>
</tr>
</table>

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Endi natijani ko’radigan bo’lsak:

Sardor	Dushamov	programmist
Eshmat	Toshmatov	dangasa

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com

border=”1” — 1 bu yerda chegara qalinligi, unga sanoqda ishlatiladigan sonlarni berishimiz mumkin.

Border ni css style da ham berishimiz mumkin, html da bergandan ko’ra css da style berib ketgan yaxshi.


<head>
<style>table,th,td{border:1px solid black;}</style>
</head>

Agar yuqorida ko’rsatilgandek beradigan bo’lsak, jadvalga va uning ichidagi yacheykalarga ham alohida border(chegara) beradi.Siz chegarani umumiy qilib berishni hohlasangiz quyidagicha yozishingiz kerak, yani jadvalni ichidagi borderlarni olib tashlaydi va faqat jadvalni o’zini borderini oladi:


<style>table,th,td{	border:1px solid black;	border-collapse:collapse;}</style>

Misol:


<html>

<head>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>

<body>
<table style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td>		
  <td>50</td>
  </tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>		
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>		
  <td>80</td>
</tr>
</table>
</body>
</html>

Ushbu misoldagi

border-collapse:collapse;

Qismini olib tashlab ishlatib ko’ring va farqini bilib olasiz.Jadval sarlavhalariJadvalga sarlavha berishimiz uchun yuqorida aytib o’tganimizdek tegidan foydalanamiz.
Misol:


<table style="width:300px" border="1">
<tr>  
  <th>Ism</th>  
  <th>Familya</th>   
  <th>Kasbi</th>
</tr>
<tr>  
  <td>Sardor</td>  
  <td>Dushamov</td>   
  <td>dasturchi</td>
</tr>
<tr>
  <td>Eshmat</td>
  <td>Toshmatov</td>		
  <td>dangasa</td>
</tr>
</table>

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com
Natija:

Ism	Familya	Kasbi
Sardor	Dushamov	dasturchi
Eshmat	Toshmatov	dangasa

td tegining colspan attributi.
colspan — ikkita ustunni birlashtirish uchun ishlatiladi.
Misol:

<html>
<body>

<table border="1">
  <tr>
    <th>Oylar</th>
    <th>Harajatlar</th>
  </tr>
  <tr>
    <td>Yanvar</td>
    <td>400000 so'm</td>
  </tr>
  <tr>
    <td>Fevral</td>
    <td>600000 so'm</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>
 
</body>
</html>

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com

Natija:

Oylar	Harajatlar
Yanvar	400000 so'm
Fevral	600000 so'm
Jami: 1000000 so'm

td tegining rowspan attributi.
rowspan — ikkita qatorni birlashtirish uchun ishlatiladi.
Misol:

<html>
<body>

<table border="1">
  <tr>
    <th>Oylar</th>
    <th>Kirim</th>
    <th>Chiqim</th>
  </tr>
  <tr>
    <td>Yanvar</td>
    <td>50000 so'm</td>
    <td rowspan="2">100000 so'm</td>
  </tr>
  <tr>
    <td>Fevral</td>
    <td>80000 so'm</td>
  </tr>
</table>

</body>
</html>

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com

Natija:

Oylar	Kirim	Chiqim
Yanvar	50000 so'm	100000 so'm
Fevral	80000 so'm	100000 so'm

html, web

2 комментария

salom! men sayt yaratguncha muammoga duch keldim ( azamat0501.zn.uz/2014/03/16/darsliklar/ ) sahifaga jadval quydim, jadval kataklari foniga rang bera olmadin, bu ish qanday qilinadi?

-1