HTML iç içe tablo yapmak en basit anlamda bir tablonun içine başka bir tablo yapmak demektir. İç içe tablolu tasarımlar doğası gereği karmaşık HTML yapıları oluştururlar. Bu karmaşık yapılar da doğal olarak hata yapmak olasılığı taşımaktadır.
İç içe tablo oluşturmak isterseniz. İkinci yada daha alttaki tabloyu kapsayan <td>….</td> etiketi içinde yazarak oluşturabilirsiniz. Aşağıdaki bir kaç örnekte HTML iç içe tablonun nasıl oluşturulduğu gösterilmektedir. HTML tabloları ile ilgili örnek görselleri ve kodları inceleyerek sizlerde kendi tablolu yapılarınızı oluşturabilirsiniz.
Örnek 1: HTML iç içe tablo oluşturma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Tasarimkodlama.com</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } </style> </head> <body> <table> <tr> <td> <p>Burası 1 Paragraf</p> <p>Tasarimkodlama.com</p> </td> <td>Bu ikinci tablonun içinde olacağı hücre <table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>Burassı da ilk tabloda başka bir hücre <ul> <li>PHP</li> <li>ASP</li> <li>JSP</li> </ul> </td> <td>Merhaba HTML</td> </tr> </table> </body> </html> |
Örnek 2: HTML İç İçe Tablo Oluşturma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Tasarimkodlama.com</title> </head> <body> <table style="border:5px red solid;"> <tr> <td> Tasarim Kodlama </td> <td><table style="border:5px green solid;"> <tr> <td> Tasarim Kodlama </td> </tr> <tr> <td> Tasarim Kodlama </td> </tr> </table></td> </tr> </table> </body> </html> |
Örnek 3: HTML İç İçe Tablo Oluşturma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Tasarimkodlama.com</title> </head> <body> <table style="border:2px solid blue;"> <tr> <td> <table style="border:2px solid pink;"> <tr> <td> <table style="border:2px solid red;"> <tr> <td> <table style="border:2px solid green;"> <tr> <td>www.tasarimkodlama.com</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html> |
Yorum Yap