HTML görüntüyü hücreye girin. Neredeyse standart mod
1. HTML tabloları nedir ve neden ihtiyaç duyuluyorlar?
hTML tablosu - Bu, her bir HTML sayfasının en temel bileşenlerinden biridir ve her bir siteye sırasıyla. Örneğin, site sitesi tümü tablolardan oluşur: Resimler, metinler, bağlantılar, kayıt formları - HTML tablolarını kullanarak birbirine göre her şey yerleştirilir (aslında, tüm site aynı zamanda büyük bir masada bulunur).
2. HTML tablolarından gelen etiketler nelerdir?
EtiketlerHTML tablosunun belirlenmesi şöyle yazılmıştır:
Ancak bildiğimiz için, tüm tablolar çizgiler ve sütunlardan (hücreler) oluşur, bu nedenle etiketleri ve bunlar için ayarlamanız gerekir:
Ve şimdi tüm etiketleri bir masaya birleştirmeyi deneyelim. Bunu yapmak için, iki satırdan ve üç sütundan oluşan bir HTML tablosu oluşturacağız:
Bu HTML çok kolay yapılır. Başlamak için, tablonun etiketlerini, içeride gerekli sayıda çizgiyi (örneğimizde 2 satırımızda) koyduğumuz için koyduk.
Ardından, her dize sütun etiketlerini kullanarak hücrelere ayrılır:
| - Hücre 1.1 | - Hücre 1.2. | - Hücre 1.3. |
| - Hücre 2.1 | - Hücre 2.2. | - Hücre 2.3. |
Aslında, yazıtlardaki ilk rakam bir sayı numarasıdır ve ikinci hücre numarası (1x2, ilk sıra, ikinci hücre vb.).
3. HTML tablolarının arka plan rengini nasıl ayarlanır?
Ve şimdi tablonun geçmişinin veya her bir hücrenin nasıl ayrı ayrı belirtildiğiyle uğraşalım.
Böylece, öznitelik arka planı ayarlamak için kullanılır. bgcolor \u003d "color_fone".
Örneğin, tüm plaka için bir renk ayarlamamız gerekirse, şöyle yapılır:
| - Hücre 1.1 | - Hücre 1.2. | - Hücre 1.3. |
| - Hücre 2.1 | - Hücre 2.2. | - Hücre 2.3. |
Örneğin, sarı bir tablet yapmanız gerekiyorsa, yazıyoruz:
Gerekirse arka plan rengi satırını ayarla HTML tabloları, sonra öznitelik bgcolor \u003d "color_fone" Etikete başvur
|
| 1.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.3 |
Bu durumda, öznitelik hücre numarası Etiketin içindeki metne beyaz rengi belirtir.
Benzer şekilde, her hücrenin rengi ayrı ayrı. Örneğin, hücrenin 1.2 rengini mavi üzerindeki rengini değiştirmeniz gerekirse, açılış etiketinin içinde
4. Tablonun HTML hücrelerinin genişliğini ve yüksekliğini nasıl ayarlanır?
Böylece, hücrelerin genişliğini ve yüksekliğini manuel olarak ayarlamak için, yükseklik ve genişlik özelliklerini kullanın. Tüm tablo için, hücre (sütun) için bir satır için ayarlanabilirler. Yükseklik ve genişlik hem piksel hem de yüzdelerde ayarlanabilir. Bizim durumumuzda, sütunlar için piksel (hücreler) genişliğini ve yüksekliği ayarlayacağız.
yükseklik - Öznitelik Hücrenin yüksekliğini ayarlama
genişlik. - Hücrenin genişliğini tanımlayan nitelik
Ve şimdi örnekte:
Şimdi neden hücrelerin yüksekliğini her satırda bir kez ayarladığımızı açıklayacağım.
Herhangi bir hücre yüksekliği için herhangi bir hücre yüksekliği için belirttiğiniz bir numarada, başkalarına göre, buna rağmen, satırınızın tüm hücreleri (sütunları) yükseklikte en yüksek olacaktır. Ve her satırın genişliği en iyi şekilde ayarlanır!
Tüm tablonun yüksekliğini ve genişliğini ayarlayabilirsiniz. Bu durumda, tüm hücreler (sütunlar) ve satırlar, bunlar için bu parametreleri kişisel olarak belirtmezseniz (tablonun veya piksellerin toplam genişliğinin (yükseklik) yüzdesi olarak) bunlara verilen boşluğa bölünecektir.
Ayrıca, çok sık yükseklik yüksekliği ve genişlik genişliğini ayarlamanız gerekir. yüzde:
Bir hücre için yüzde 40'lık bir genişlik belirlersek, örneğimizde olduğu gibi, hücrelerin geri kalanında yüzde 60'ı daha kaldığımız anlamına gelir, yani. Genişliklerinin miktarı yüzde 60'ı geçmemelidir. Her şey çok basit: Miktarda sadece% 100 var. İnandık: 100 - 40 \u003d 60.
5. HTML tablosunun içindeki metni nasıl hizalanır?
Ve şimdi, metni, HTML tablosumuzdaki metnini sol kenarda, sağ kenarda ve merkezde nasıl hizalayacağınızı belirtelim.
Bu özellik kullanılarak yapılır:
align \u003d "sol" - Sol kenardaki HTML tablolarının içindeki metinler
align \u003d "Center" - Seviyeler html metni Merkezdeki masalar
align \u003d "sağ" - Sağ kenardaki HTML tablolarının içindeki metinler
Buna göre, hizalama niteliği daha doğru ve sol değerler alabilir. Etiketle kullanıldığında değeri haklı çıkarın
Örneğin, hTML Kodu Metin, merkezde hizalanmış olan tablolar şöyle görünür:
|
Özniteliği Belirleme Align \u003d "Center" Açılışta
| 1x1 | 1.2 | 1x3 |
| 2.1 | 2x2. | 2.3 |
Ve şimdi, HTML tablosunun içindeki metni üst veya alt kenarda veya alt kenarda nasıl hizalanacağını, yani hücre içeriğinin tam ortasında değil (varsayılan olarak) olduğu için nasıl yapılır? ve hatta altta aynı şekilde.
Dikey hizalama, öznitelik tarafından belirlenir:
Valign \u003d "üst" - İçerik hücrenin üstüne yerleştirilecektir.
valign \u003d "orta" - İçerik hücre merkezinde bulunacak
valign \u003d "alt" - İçerik hücrenin altına yerleştirilecektir.
Örneğimize ilişkin bu özellikleri göz önünde bulunduralım:
|
Niteliklerin çalışmalarının sonucu tarayıcıya bakarsak bu hizalayın. ve valign.:
| 1x1 | 1.2 | 1x3 |
| 2.1 | 2x2. | 2.3 |
6. Hücreleri ve sütunlar HTML tablolarını nasıl birleştirirsiniz?
Makalemizin bu bölümünde öznitelikler hakkında konuşacağız. colsan ve rowspan..
colsan - Dağıtılacak sütun sayısını belirler bu hücre
Rowspan. - Bu hücrenin dağıtıldığı satır sayısını belirler.
Değerler colsan ve rowspan. 2 ve daha fazla bir değer alabilir, yani. Hücre iki veya daha fazla sütuna (satır) uzatabilir.
Bu nedenle, şimdi örnekte, hücreyi 1x1'i iki sütuna (hücre) içine uzatıyoruz. Bunu yapmak için, 1x1 hücre için konuşan Colspan \u003d "2" özniteliğini kullanacağız. Kod böyle görünecek:
Gördüğümüz gibi, 1x1 hücre iki hücrenin uzunluğuna yayılır. Buna göre, uzunluğu, bu iki hücrenin (160 piksel) toplam uzunluğuna eşittir. Hücre 1x1 için genişlik niteliğini reçete etmedik, ancak bunu yapmaya karar verdiysek, genişlikten 160 piksel sorulur. Ayrıca, örneğimizde 1x3, yani hücre yok. İlk sırada, sadece iki hücre, neden - biz zaten tartıştık - ColSpan özniteliği sayesinde 1x1 hücre iki hücreye eşittir.
ColSpan ve Rowowpan nitelikleri ile çok dikkatli bir şekilde iletişim kurmanız gerekir. Bir hata, sitenizin "gitmesi" gerçeğine yol açabilir.
Ve şimdi, Colspan parametresiyle uğraştığımızdaRowspan parametresiyle uğraşalım. Eylem prensibi aynıdır:
|
| 1.1 | 1.2 | |
| 2.1 | 2.2 | |
Böylece, HTML tablolarının satırlarındaki ve sütunlardaki hücreleri birleştirmeyi öğrendik.
7. HTML çerçevesi tablosunu nasıl kaldırabilir, ekleyebilir veya değiştirilir?
Yani, daha önce, girintilerin açıkça görülebilen hücreler arasında bir HTML tablosu oluşturduk. Onları daha da görünür hale getirmek için, masamıza bir çerçeve ekleyelim. Bu özellikler kullanılarak yapılır:
sınır \u003d "Piksellerde Çerçeve Genişliği" - Çerçevenin genişliğini ayarlar
borderColor \u003d "Çerçeve rengi"- Çerçevenin rengini ayarlar
Örneğin, HTML tablosunu siyah çerçeve 1 piksel haline getirelim.
Bu etiket için
|
|||||
Tarayıcıdaki sonuca bakarsanız, o zaman hücreler arasındaki mesafenin ( cELLSPASING.) HTML tablosumuz 10 piksele yükselmiştir ve metni ile hücrenin iç kenarı arasındaki mesafe 20 piksel artmıştır.
| 1.1 | 1.2 | |
| 2.1 | 2.2 | |
Girintileri genellikle kaldırmanız gerekirse, daha sonra basitçe koyun. cellpadding \u003d "0"ve cELLSPACING \u003d "0".
8. Bir HTML tablosu diğerini nasıl ekler?
HTML tablolarını incelemek için son aşamaya yaklaşıyoruz. Şimdi diğerinin içine bir masa takmayı öğreneceğiz.
Örnekte, hücrenin içinde 1.2, bir satır ve iki sütundan oluşan yeni bir masa ekleyeceğiz. Dahili HTML tablosu Kırmızı Çerçeve 2 piksel genişliğini ve hücreler arasındaki mesafeyi 0 piksel arasındaki mesafeyi ayarladık. Ayrıca, iç tablo biz hücrenin tepesine yerleştireceğimiz.
Çok basit yapılır:
|
|||||||
Masamızın yeni dönüşümlerinin bir sonucu olarak olan şey budur (kırmızı hücreler - büyük bir masanın içinde bulunan bir iç tablo):
| 1.1 |
|
|||
| 2.1 | 2.2 | |||
Bu aşamada bu makaleyi bitireceğiz. Anlamak için başarılı ve zor olmadığı görülüyor ve umarım, masalarla daha fazla olmayacaksınız.
Bu masalar, bir web sayfası için görünmez bir çerçeve oluşturmada çok önemli bir rol oynar. Ve bu, metni, menüleri, fotoğrafları vb. Düzgün ve güzel bir şekilde düzenlemeye yardımcı olacaktır.
Daha iyi bir anlayış için, size söylemeye çalıştığım, bir web sayfası çerçevesinin örneğine bakın:
Yani, hTML'de basit bir masa nasıl yapılır?
Bir masa oluşturmak için üç etiket kullanın:
Tablo
–
bu etiket masayı açmak için gereklidir. Bu, diğer unsurları içeren bir tür bir kaptır. Burada giyin, böylece bir çörek olmadan anlamaz. Hiçbir şey, bir örnek gördüğünüzde paylaşın.
Kapanış etiketi
Tablo bir satırdan oluşur
| Satır 1. | Satır 1. |
| Seri 2. | Seri 2. |
| Satır 3. | Satır 3. |
| Hücre 1. | Hücre 2. |
| Hücre 1. | Hücre 2. |
| Hücre 1. | Hücre 2. |
Tr – Yeni bir masa satırı oluşturur. Kapanış etiketi zorunlu.
Td. – Üst üste yeni bir hücre oluşturur. Kapanış etiketi zorunlu.
Yukarıdakileri daha iyi anlamak için bir örneği düşünelim:
| satır 1 Cell1 | range1 Cell2. |
| seri 2 Hücre 1 | satır 2 Hücre 2 |
| aralık 3 Hücre 1 | aralık 3 Hücre 2 |
İşte sonuç:
| satır 1 Cell1 | range1 Cell2. |
| seri 2 Hücre 1 | satır 2 Hücre 2 |
| aralık 3 Hücre 1 | aralık 3 Hücre 2 |
Her şeyi açıklayalım. Sanırım öğrendiler mi? Birisi hangi niteliğin olduğunu unuttuysa sınır.Etiketle kullanıyorum Birkaç örneğe bak oluşturulan tablolar Ve daha ileri gidebilirsiniz:
Sonuç: Tabloya bir resim eklemek için, HTML dosyasındaki görüntünün nasıl yerleştirildiğine dair temel ilk bilgiye sahip olmalısınız. Bundan bahsediyorum. Şimdi HTML'deki görüntü hakkındaki ana nüansları bildiğinizde, tabloya bir resim eklemeye çalışabilirsiniz. Bu şöyle yapılabilir: etiketler arasındaki dizede
Sonuç: Tablodaki hücreleri birleştirmek için, bu nitelikleri kullanmanız gerekir:
Sonuç: Tablonun yüksekliğini ve genişliğini ayarlamak için, bu nitelikleri kullanın: Genişlik - Masa genişliği. Boyut, piksel veya yüzde olarak ayarlanır.
Sonuç: İçeriği (metin, resimler) tablonun içindeki hizalamak için, bu nitelikleri kullanabilirsiniz: Hizalayın. - Tablodaki yatay içerik hizalaması. Valign. - Tablodaki içeriğin dikey hizalaması.
Sonuç: Bütün hücrelerinin yanı sıra her hücre için arka plan tablosunu da ayrı ayrı ayarlayabilirsiniz. Arka planı renkle ayarlayabilirsiniz ve ayrıca resim yapabilirsiniz. Arka plan için iki özellik vardır: Bgcolor - Tüm tablonun veya her hücrenin ayrı ayrı renkli arka planı. Renk kod veya kelime ile ayarlanır. Dikkat: Arka plan rengini ayarlamak için giderseniz veya kurucu desen Tüm tablonun tamamı, niteliklerin etiketine kurulması gerekir. Daha iyi bir anlayış için, örneğe bakın:
Sonuç: Dikkat: Resim hücreden daha azsa, hücreyi sonuna kadar dolduruncaya kadar tekrarlanacaktır. Resim hücre başına daha fazlaysa, resmin arka planı boyut boyutlarında kırpılır. Ve sonunda size söyleyeceğim İki kullanışlı nitelik. Birdenbire tüm hücreler arasındaki mesafeyi artırmak isterseniz, aşağıdaki özellikler yardımcı olacaktır: Cep telefonu. - HTML tablosunun her bir hücresinin çerçevesi ile içinde içeriği içinde iç mekan.
Sonuç: CELLSPASING. - Komşu hücrelerin sınırları arasındaki transfer.
Sonuç: Fuh, söyledi! L yubaya hTML'deki tablo. Hücrelerin kesişimi üzerine bir sıra ve sütun kümesidir. HTML'de tablolar oluşturmak kolaydır, sadece son modeli hayal etmek gereklidir. HTML dilinde, tablolar yalnızca veri göndermek için kullanılmaz, metin blokları, görüntüler vb. Yerleştirmek için kullanılabilir. Web sayfasında, yani. Yardımlarıyla, sayfanın kendisinin bir düzenini oluşturabilirsiniz. Öğe, HTML dilinde tablolar oluşturmak için kullanılır. tablove tüm kod (onun içerikleri) Tablolar etiketler arasında bulunur
. Bu elemanın özellikleri tüm tablo için değerleri ayarlayın: Mavi bir arka plana sahip bir tablo koduna bir örnek yazın, 1px'te kalın bir çizgi kalın. beyaz renk, 2px hücrelerin içindeki ve dışındaki kibirler, sayfadan% 100 genişlik: bgcolor \u003d "mavi" border \u003d "1" BorderColor \u003d "White" Cellpadding \u003d "10" Cellspacing \u003d "2" Genişlik \u003d "% 100"\u003e Her masada en az bir satır olmalıdır, etiketler tarafından belirlenir.
. Aşağıdaki örnekte, bir dize eklemenin bir örneğini görüyoruz: bgcolor \u003d "mavi" border \u003d "1" BorderColor \u003d "White" Cellpadding \u003d "10" Cellspacing \u003d "2" Genişlik \u003d "% 100"\u003e Hücreler tablonun dikey sütunlarını oluşturur, etiketlerle gösterilir.
. Masamıza hücre ekleyin: bgcolor \u003d "mavi" border \u003d "1" BorderColor \u003d "White" Cellpadding \u003d "10" Cellspacing \u003d "2" Genişlik \u003d "% 100"\u003e Hücre №1. Elde edilen tabloya bakınız: Bazı durumlarda, birkaç satır için bir sütunu germek için gerekli olabilir, çünkü bunun için bir özellik uygular rowspan.değeri, kombinasyon için gereken satır sayısını belirler. Bir örnek görüyoruz: Bgcolor \u003d "mavi" border \u003d "1" BorderColor \u003d "White" Cellpadding \u003d "10" Cellspacing \u003d "2" Genişlik \u003d "% 100"\u003e rowspan \u003d "2"\u003e satırlar 1 ve №2 birleştirildi Hücre numarası 3. Satır numarası 3. Tarayıcı görüntülenecek: Sütunlar aynı prensiple birleştirilir, yalnızca özniteliği kullanarak colsan. Bir örnek görüyoruz: bgcolor \u003d "mavi" border \u003d "1" BorderColor \u003d "White" Cellpadding \u003d "10" Cellspacing \u003d "2" Genişlik \u003d "% 100"\u003e colSpan \u003d "2"\u003e Sütunlar №1 ve №2 Kombine Hücre №1. Hücre numarası 4. Tarayıcı görüntülenecek: Öznitellikler colsan ve rowspan. Eşzamanlı olarak kullanabilirsiniz. Tarayıcıda şöyle görünecek: Ya da böyle: Ve kodu kendin yazmaya çalışın! Yükseklik ve genişlik, hem masanın tamamı için bir bütün olarak sorulabilir ve bireysel çizgiler ve sütunlar için bazı tanıdık özelliklerde yapılır. genişlik. ve yükseklikDeğerler hem piksellerde hem de yüzde olarak belirtilir. Yatay tabloyu hizalamak, nitelik tarafından belirlenir hizalayın., zaten anlamları biliyorsunuz: sol, merkez, sağ. Ve tablo hücrelerinde metni hizalamak için yatay hizalama özelliği hizalayın. Her etikete başvurmanız gerekir td.. Dan cSS'yi kullanma. Çok basittir. Bir nitelik, hücrelerin içeriğini düzleştirmek için uygulanır. valign.. Ayrıca anlamları var - merkezdeki dikey hizalama orta, tepede Üst. ve altta alt Taban çizgisi (mevcut satırın metninin bulunduğu satır). Arka plan görüntüsü veya rengi, hem tüm tablonun tamamı için hem de tek bir hücre için de sorulabilir, hepsi hangi amaçlara unutulduğunuza bağlıdır. Bu ayarlanmış - görüntü için - öznitelik arka fon.Değeri, gerekli grafik dosyanın yolunu reçete etti. Renkli arka plan için - öznitelik bgcolorBurada değer rengin adıdır. İşte genel olarak ve giriş seviyesi için gerekli olan her şey. HTML'deki tablolardaki bölümün sonunda, HTML ile ilk tanışmanız sona erer. Üzerinden hTML'deki tablolar. Basit web sayfaları şablonları oluşturabilirsiniz, bu yüzden ilk tam teşekkülünüzü şu anda tam teşekkülünüzü oluşturmanızı öneririm. Malzeme bunun için yeterince geçti. Hyperspace'in fethini öne! Bir tablo oluşturun ve parametrelerini (aletler ve hücreler arasındaki mesafe) stillerle belirtin. Tablo, metin ve çizimler içerebilecek satır ve hücre sütunlarından oluşur. Bir web sayfasına bir masa eklemek için etiket
Her yaratılmadan önce yeni masa Tag açılır
.
Sonra, kabın ortasına yerleştirin
etiket
.
Yeni bir satırın başlangıcı hakkında ne konuşmaz.
.
Bu satırda etiketle içeriğe sahip iki hücreyi yerleştirin.
Satır 1 Cell1
Range1 Cell2.
Birkaç etiketi kapatın
Başka bir seri etiketini aç
.
Birkaç etiketi kapatın
Üçüncü seri etiketini açın
Ve tekrar iki hücreyi tekrar yerleştirin.
.
Birkaç etiketi kapatın
Kapat Tablo Etiketi
Bunun, bunun çerçevenin kalınlığı olduğunu hatırlatıyorum. Eğer içeride sınır. "0" değeri ayarlanacak, o zaman tablonun sınırları görünmez olacaktır.
satır 1 Hücre 1
seri 2 Hücre 1
Bir resim ekleyin.
satır 1 Hücre 1
1 hücre aralığı 2
satır 1 Hücre 1
1 hücre aralığı 2
Ve masadaki hücreleri nasıl birleştirirsiniz?
Colsan. - Sütun sayısını belirler.
Varsayılan Değer 1.
Rowspan. - Satır sayısını belirler.
Varsayılan Değer 1.
hücreleri birleştiriyoruz Özniteliği kullanarak üst satırda colsan
:
satır 1 Hücre 1 + 2
seri 2 Hücre 1 satır 2 Hücre 2
Tablonun boyutunu nasıl ayarlanır?
Yükseklik - Tablo yüksekliği. Boyut, piksel veya yüzde olarak ayarlanır.
satır 1 Cell1 range1 Cell2.
seri 2 Hücre 1 satır 2 Hücre 2
İçeriği tablodaki hizalayın
Öznitelik Hizalayın. Değerleri atar: sol (varsayılan), merkez, Sağ.
ayrıldı -İçeriğe sol tarafa basın;
merkez -merkeze takın;
sağ -İçeriğe sağ parçaya basın
Öznitelik Valign. Değerleri atar: Üst, alt, orta.
Üst.
–
İçeriği üste basın;
alt
–
İçeriğe dibe basın;
orta
–
İçeriği ortada ayarlayın
satır 1 Cell1
range1 Cell2.
seri 2 Hücre 1
satır 2 Hücre 2
Arka plan tablosu nasıl yapılır?
Arka fon. - Tablo masaya doldurulur.
. Ve eğer sadece belirli bir hücreye, sonra etikette
.
satır 1 Cell1
range1 Cell2.
seri 2 Hücre 1
satır 2 Hücre 2
satır 1 Cell1
range1 Cell2.
seri 2 Hücre 1
satır 2 Hücre 2
satır 1 Cell1
range1 Cell2.
seri 2 Hücre 1
satır 2 Hücre 2
satır 1 Cell1
range1 Cell2.
seri 2 Hücre 1
satır 2 Hücre 2
satır 1 Cell1
range1 Cell2.
seri 2 Hücre 1
satır 2 Hücre 2
Umarım başa çıkıp erişilebildiğim görevin bildiği her şeyi açıkladım. hTML tablosu. Ve malzemeyi iyi sabitlemenizi öneririm.
Kendi masanızı oluşturmayı deneyin ve HTML tablosundan bir web sayfası için bir tam bir kare daha iyi.
Hepiniz iyisiniz!
Blogumu ziyaret ettiğin için teşekkür ederimTablo öğesi, bir masa oluşturun
Dize ekle
Hücreler ekle
Hücre No. 2.
Hücre numarası 3.Dizgi birleştirmek
Hücre1.
Hücreli22.
Hücre numarası 4.
Hücre numarası 5.
Hücre numarası 6.Satır 1 ve №2 birleştirildi
Hücre1.
Hücreli22.
Hücre numarası 3.
Hücre numarası 4.
Satır numarası 3.
Hücre numarası 5.
Hücre numarası 6.
Sütunların Birleştirilmesi
Sütun numarası 3.
Hücre No. 2.
Hücre numarası 3.
Hücre numarası 5.
Hücre numarası 6.Boyutlar ve Hizalama Tablosu
Arka plan masa
En sonunda
/
Sonra, bir web sitesi oluşturmamak için:
∼
∼
Bir görev
Karar
