HTML सारणी तत्व गुणधर्मांचा वापर करणे

टेबल गुणधर्मांचा अभ्यास करून एचटीएमएल टेबलमधून अधिक मिळविणे

HTML सारणी विशेषता आपल्याला HTML सारण्यांवर अधिक नियंत्रण देते. सारण्यांसाठी भरपूर वैशिष्ट्ये उपलब्ध आहेत जे त्यांना अधिक रूचिपूर्ण बनविण्यासाठी आणि आपल्या पृष्ठाचे स्वरूप बदलू शकतात.

HTML सारणी तत्व गुणधर्म

HTML5 मध्ये मूलभूत गुणधर्म आणि एक अन्य विशेषता वापरली जाते: आणि ते केवळ 1 किंवा रिक्त (म्हणजेच सीमा = "") चे मूल्य बदलले आहे. आपण सीमेची रूंदी बदलू इच्छित असल्यास, आपण सीमा-रुंदी सीएसएस गुणधर्म वापरणे आवश्यक आहे

वैध HTML5 सारणी वैशिष्ट्यांबद्दल जाणून घेण्यासाठी खाली पहा.

एचटीएमएलमध्ये अप्रचलित झालेली HTML 4.01 स्पेसिफिकेशनचा भाग असणारे बरेच गुणधर्म आहेत:

• -कॅब्सच्या टीडी आणि टीएच घटकांवरील CSS पॅडिंग प्रॉपर्टीचा वापर करा.
• -संपूर्ण सीएसएस गुणधर्म-स्पेसिंग टेबलवर वापरा.
• -सीएसएस शैली सीमेपार रंग वापरा: काळा; टेबलवर आणि सीमा-शैली.
• -सीएसएस शैली सीमेपार रंग वापरा: काळा; टेबलच्या योग्य घटकांवर आणि सीमा-शैली.
• -त्याऐवजी, आपण एका कप्पेमध्ये टेबलच्या संरचनेचे वर्णन केले पाहिजे किंवा संपूर्ण टेबलला FIGRE मध्ये ठेवले आणि ते FIGCAPTION मध्ये वर्णन केले पाहिजे. वैकल्पिकरित्या, आपण टेबलची संरचना सुलभ करू शकता जेणेकरून स्पष्टीकरण आवश्यक नाही.
• -सीएसएस रूंदीचे गुणधर्म वापरा.

आणि एक विशेषता जी HTML 4.01 मध्ये नापसंत होती आणि HTML5 मध्ये देखील अप्रचलित आहे.

HTML 4.01 टेबल विशेषतांविषयी अधिक जाणून घ्या.

• संरेखन- त्याऐवजी सीएसएस मार्जिन ठिकाण वापरा.

अशी अनेक वैशिष्ट्ये आहेत जी कोणत्याही HTML विनिर्देशनाचा भाग नाहीत.

आपण ओळखत असलेले ब्राउझर त्यांना हाताळू शकतात आणि आपल्याला वैध HTML बद्दल काळजी नाही हे आपल्याला माहित असल्यास हे विशेषता वापरा

• - त्याऐवजी सीएसएस प्रॉपर्टी पार्श्वभूमी रंग वापरा.
• bordercolor- त्याऐवजी सीएसएस गुणधर्म-रंग वापरा.
• bordercolorlight- त्याऐवजी सीएसएस गुणधर्म-रंग वापरा.
• bordercolordark- त्याऐवजी सीएसएस गुणधर्म-रंग वापरा.

• cols- या गुणधर्म चा पर्याय नाही.
• उंची - त्याऐवजी सीएसएस गुणधर्म वापरा.
• त्याऐवजी सीएसएस प्रॉपर्टी मार्जिन वापरा.
• त्याऐवजी सीएसएस प्रॉपर्टी मार्जिन वापरा.
• - त्याऐवजी सीएसएस गुणधर्म पांढरा-जागा वापरा.
• -त्याऐवजी सीएसएस गुणधर्म उभा-संरेखन वापरा.

ब्राउझर विशिष्ट टेबल वैशिष्ट्यांबद्दल अधिक जाणून घ्या.

HTML5 सारणी एलिमेंट विशेषता

आम्ही वर उल्लेख केल्याप्रमाणे, जागतिक विशेषतांच्या पलीकडे केवळ एकच विशेषता आहे, जी एक HTML5 टॅबल घटक: सीमा आहे.

सीमा विशेषतेस संपूर्ण सारणीच्या सभोवतालची सीमा आणि त्यातील सर्व सेल परिभाषित करण्यासाठी वापरला जातो. हा HTML5 स्पष्टतेमध्ये ते समाविष्ट केले जाईल किंवा नाही याबद्दल काही प्रश्न होता, परंतु तो फक्त शैलीच्या परिणामांव्यतिरिक्त, टेबल संरचनांबद्दल माहिती प्रदान करत असल्यामुळे राहिले.

सीमा विशेषता जोडण्यासाठी, आपण तेथे सीमा नसल्यास रिक्त (किंवा गुणधर्म सोडून द्या) नसल्यास आपण मूल्य 1 वर सेट करा. बॉर्डरची रुंदी पिक्सेल्समध्ये घोषित करण्यासाठी बहुतेक ब्राऊझर्स 0 च्या सीमेसाठी 0 आणि इतर कोणत्याही इंटिजर व्हॅल्यू (2, 3, 30, 500, इ) चे समर्थन करतील, परंतु हे HTML5 मध्ये अप्रचलित आहे. त्याऐवजी, आपण सीमाभागातील चौकोनी आणि इतर शैली परिभाषित करण्यासाठी सीएसएस सीमा शैली गुणधर्मांचा वापर करावा.

सीमेसह टेबल तयार करण्यासाठी, लिहा:

<सारणी सीमा = "1" >

ही सीमा असलेली एक सारणी आहे

HTML5 मध्ये अप्रचलित असलेले HTML 4.01 विशेषता आहेत. आपण HTML 4.01 दस्तऐवज लिहिण्याची योजना आखल्यास, आपण ते जाणून घेऊ शकता अन्यथा, आपण त्यांना दुर्लक्ष करू शकता. यापैकी बहुतेक गुणधर्मांकडे पर्यायी वर्णन केलेले आहेत.

आम्ही HTML5 (आणि HTML 4.01) मध्ये वैध असलेल्या घटकांच्या विशेषतांचे वर्णन करतो. हे TABLE विशेषतांचे वर्णन करते जे HTML 4.01 मध्ये वैध आहेत, परंतु HTML5 मध्ये अप्रचलित आहेत आपण अद्याप HTML 4.01 दस्तऐवज लिहिल्यास, आपण या विशेषता वापरू शकता, परंतु त्यापैकी बहुतेक पर्याय आहेत जे आपल्या पृष्ठांना भविष्यातील असतील तर जेव्हा आपण HTML5 मध्ये जाता

वैध HTML 4.01 विशेषता

आम्ही वरील विशेषतांचा उल्लेख केला आहे

HTML5 मधील HTML 4.01 मध्ये फक्त फरक असा आहे की आपण पिक्सेलमध्ये सीमेची रूंदी परिभाषित करण्यासाठी कोणतीही पूर्ण संख्या (0, 1, 2, 15, 20, 200, इ.) निर्दिष्ट करू शकता.

एक 5px सीमेसह टेबल तयार करण्यासाठी, लिहा:

<सारणी सीमा = "5" >

या सारणीमध्ये एक 5px सीमा आहे.

सीमा सह दोन सारण्यांचे उदाहरण पहा.

विशेषता सेलची सीमा आणि सेलची सामग्री यांच्यातील स्पेस् ची व्याख्या करते. डीफॉल्ट दोन पिक्सल आहे. सामग्री आणि सीमा दरम्यान कोठेही जागा नसल्यास सेलपॅडिंग 0 वर सेट करा.

सेल पॅडिंग 20 वर सेट करण्यासाठी, लिहा:

<सारणी सेलपॅडिंग = "20" >

या सारणीमध्ये सेलॅपॅडिंग 20 आहे.


सेल सीमा 20 पिक्सेल्सद्वारे विभक्त होतील.

सेलपॅडिंगसह टेबलचे उदाहरण पहा

विशेषता तक्ता सेल आणि सेल सामग्री दरम्यान स्पेसचे प्रमाण परिभाषित करते. सेलपॅडिंग प्रमाणे, डीफॉल्ट दोन पिक्सेलवर सेट आहे, म्हणून जर आपल्याला सेल स्पेसिंग नको असेल तर आपण तो 0 वर सेट करणे आवश्यक आहे.

सारणीमध्ये सेल स्पेिंग जोडण्यासाठी, लिहा:

<सारणीतील पेशीकलेत = "20" >

या सारणीमध्ये 20 च्या कोशिकेचे स्थान आहे.


सेल 20 पिक्सेलद्वारे विभक्त होतील.

सेल स्पेसिंगसह एक टेबल पहा

विशेषता एका टेबलबाहेरील सभोवतालच्या सीमेवर कोणत्या भागांची दृश्यमान असेल हे ओळखते. आपण आपली चारही बाजूंवर टेबल, कोणत्याही एका बाजूला, वर आणि खाली, डावीकडे व उजवीकडे, किंवा काहीही करू शकता.

येथे डाव्या बाजूच्या सीमारेखालील टेबलसाठी HTML आहे:

<सारणी सीमा = "1" फ्रेम = "lhs" >

ही सारणी
असेल


केवळ
डाव्या बाजूला रचला.

आणि तळ फ्रेमसह दुसरे उदाहरण:

<सारणी सीमा = "1" फ्रेम = "खाली" >

या सारणीच्या तळाशी एक फ्रेम आहे.

फ्रेम्ससह काही टेबल पहा

विशेषता फ्रेम वैशिष्ट्यासारखीच आहे, ती केवळ सारणीच्या कक्षांभोवती सीमा प्रभावित करते. आपण सर्व सेलवर, स्तंभ दरम्यान, टीबीओडीएवाय आणि टीओओओटीएटी यासारख्या गटांप्रमाणे नियम सेट करू शकता.

केवळ ओळींमधील ओळींमधून टेबल तयार करण्यासाठी, लिहा:

<सारणी सीमा = "1" नियम = "पंक्ती" >

या 4x4 सारणीमध्ये आहे
पंक्तिंनी स्तंभ नाहीत


सह आराखडा
नियम विशेषता.

आणि दुसरा स्तंभ दरम्यानच्या ओळी:

<सारणी सीमा = "1" नियम = "स्तंभ" >

हे आहे
एक सारणी
जिथे


स्तंभ
आहेत
हायलाइट केलेले

नियमांनुसार ए.ए. टेबलचे उदाहरण येथे दिले आहे

विशेषता स्क्रीनवरील वाचकांसाठी आणि इतर वापरकर्ता एजंटच्या सारणीविषयी माहिती प्रदान करते ज्यास सारणी वाचण्यास त्रास होऊ शकतो. सारांश गुणविशेष वापरण्यासाठी, आपण टेबलचे थोडक्यात वर्णन लिहू आणि हे गुणधर्मचे मूल्य म्हणून ठेवले. सारांश सर्वात मानक वेब ब्राउझरमध्ये वेब पृष्ठावर प्रदर्शित होणार नाही

सारांशानुसार सोप्या पद्धतीने कसे लिहायचे ते येथे आहे:

<सारणी सारांश = "ही एक नमूना सारणी आहे ज्यामध्ये फिलरची माहिती आहे. या सारणीचा उद्देश सारांश प्रदर्शित करणे आहे." >

स्तंभ 1 पंक्ती 1
स्तंभ 2 पंक्ती 1


स्तंभ 1 पंक्ती 2
स्तंभ 2 पंक्ती 2

सारांशाने एक सारणी पहा

विशेषता पिक्सल किंवा कंटेनर घटक टक्केवारीच्या रूपात टेबलची रूंदी परिभाषित करते. रूंदी सेट केलेली नसल्यास, सामुग्री फक्त त्यापेक्षा जास्त जागा घेईल जेणेकरून सामुग्री दर्शविण्याची आवश्यकता असेल, कमाल रूंदीसह मूळ घटकांची रूंदी सारखेच असेल

पिक्सल मध्ये विशिष्ट रूंदीसह टेबल तयार करण्यासाठी, लिहा:

<तक्ता रुंदी = "300" >

ही सारणी तिच्यामधील असलेल्या कंटेनरच्या 80% रूंदी आहे.

आणि पॅरेंट घटकाची टक्केवारी असलेल्या रूंदीसह टेबल तयार करण्यासाठी, लिहा:

<तक्ता रुंदी = "80%" >

ही सारणी तिच्यामधील असलेल्या कंटेनरच्या 80% रूंदी आहे.

रूंदीसह सारणीचे उदाहरण पहा

बहिष्कृत HTML 4.01 टेबल विशेषता

एचटीएमएल 4.01 मध्ये नापसंत केलेला आहे आणि एचटीएमएल 5 मधील अप्रचलित अशा टेबल तत्वाचे एक वैशिष्ट्य आहे: संरेखन . हे वैशिष्ट्य आपण सेट करू देतो की ते पृष्ठाच्या बाजूच्या बाजूच्या मजकूराशी संबंधित पृष्ठावर कुठे टेबल असावा. हे गुणधर्म HTML 4.01 मध्ये नापसंत केले गेले आहेत, आणि आपण ते वापरणे टाळावे. त्याऐवजी, आपण सीएसएस गुणधर्म किंवा मार्जिन-डावा वापरा: ऑटो; आणि समास-उजवीकडे: स्वयं; शैली फ्लोट प्रॉपर्टी आपल्याला परिणाम देते जो संरेखित गुणधर्म प्रदान करते त्या जवळ आहे परंतु हे पृष्ठाच्या बाकीच्या पृष्ठावरील प्रदर्शनास प्रभावित करू शकते. मार्जिन-उजवा: स्वयं; आणि समास-डावीकडे: स्वयं; W3C एक पर्याय म्हणून शिफारस काय आहेत

अलाइन विशेषता वापरून येथे एक नापसंत उदाहरण आहे:

<सारणीची संरेखन = "उजवीकडे" >

ही सारणी उजवीकडे राशीने उजवीकडे आहे


मजकूराची डावीकडे वळा

संरेखित गुणधर्म वापरून नापसंत केलेला उदाहरण पहा.

आणि वैध (नॉन-डिस्ट्रक्टेड) ​​HTML सह समान प्रभाव मिळविण्यासाठी, लिहा:

<सारणी शैली = "फ्लोट: उजवीकडे;" >

ही सारणी उजवीकडे राशीने उजवीकडे आहे


मजकूराची डावीकडे वळा

खालील सारणी वैशिष्टये स्पष्ट करते ज्या कोणत्याही HTML विनिर्देशनाचा भाग नाहीत.

मागील माहिती एचटीएमएल घटकांचे गुणधर्म सांगते जे HTML 4.01 मध्ये वैध आहेत परंतु HTML5 मध्ये अप्रचलित आहेत.

निम्नलिखित तक्ता विशेषता वर्णन करतात जी कोणत्याही वर्तमान सूचनेत वैध नाहीत. आपण आपली पृष्ठे सत्यापित करीत नाही आणि आपल्या वापरकर्त्यांनी या घटकांना समर्थन देणारे एक ब्राउझर वापरत असल्याबाबत आपल्याला काळजी नसल्यास, आपण या घटकांचा वापर करू शकता परंतु त्यापैकी बहुतेक हे एकतर आधुनिक ब्राउझरमध्ये असमर्थित आहेत किंवा विकल्प आहेत जे अधिक मानक-अनुरूप आहेत.

आम्ही आपल्या HTML सारण्यांवर या विशेषता वापरण्याची शिफारस करत नाही .

विशेषता हा एक जुना गुणधर्म आहे जो सीएसएस व्यापक प्रमाणात समर्थित होता. हे आपल्याला टेबलचे पार्श्वभूमी रंग बदलण्यास अनुमती देते. आपण एक रंग नाव किंवा हेक्साडेसिमल कोड सेट करू शकता. हा विशेषता बर्याच ब्राउझरमध्ये कार्य करते परंतु भविष्यातील पुराव्यासाठी HTML वापरायला आपण वापरत नाही आणि त्याऐवजी CSS वापरणे आवश्यक आहे.

या विशेषतेचे चांगले पर्याय म्हणजे शैलीची मालमत्ता.

सारणीचा पार्श्वभूमी रंग बदलण्यासाठी, लिहा:

<सारणी शैली = "पार्श्वभूमी-रंग: # सीसीसी;" >

या सारणीमध्ये एक ग्रे पार्श्वभूमी आहे

Bgcolor गुणधर्मांप्रमाणेच, सीमावर्तुळाचे गुणविशेष आपल्याला वैशिष्ट्याचा रंग बदलू देतात. हे विशेषता केवळ इंटरनेट एक्सप्लोररद्वारे समर्थित आहे. त्याऐवजी, आपण सीमा-रंग शैलीतील मालमत्ता वापरणे आवश्यक आहे

आपल्या सारणीच्या सीमेचा रंग बदलण्यासाठी, लिहा:

<सारणी सीमा = "1" शैली = "सीमा-रंग: लाल;" >

या सारणीमध्ये लाल सीमा आहे.

आपण आपल्या सारणीच्या सभोवतालची 3D सीमा तयार करण्यास परवानगी देण्यासाठी सीमावर्ती रंग आणि सीमाक्षेत्र गुणधर्म इंटरनेट एक्सप्लोररमध्ये समाविष्ट केले आहेत. तथापि, IE8 आणि वर म्हणून, हे केवळ IE7 मानक मोड आणि Quirks मोडमध्ये समर्थित आहे. मायक्रोसॉफ्ट म्हणते की हे गुणधर्म यापुढे समर्थित नाहीत.

थोड्या काळासाठी, सारणीतील घटकांवरील स्तंभांचे गुणधर्म प्रस्तावित करण्यात आले होते जेणेकरुन ब्राउझर हे जाणू शकतील की टेबल सारख्या किती स्तंभ आहेत. पूर्वपदावर असा होता की हे मोठ्या टेबलच्या प्रस्तुतीस जलद गतीने मदत करेल. तथापि हे केवळ इंटरनेट एक्सप्लोरर द्वारे कार्यान्वित होते, आणि IE8 आणि त्यानुसार, हे फक्त IE7 मानक मोड आणि क्विक्स मोड मध्ये समर्थित आहे.

कारण रूंदी विशेषता (HTML5 मधील अप्रचलित) असल्यामुळे बरेच लोक मानतात की टेबल्ससाठी उंची विशेषता देखील होती. परंतु सारण्या त्यांच्या सामग्रीच्या रूंदी किंवा सीएसएस किंवा रुंदीतील विशिष्ठ रूपात जुळणार्या कारणांमुळे उंची मर्यादित होऊ शकत नाही. त्याऐवजी, ब्राउझरने उंचीच्या वैशिष्ट्यास टेबलच्या किमान उंचीची व्याख्या करण्यास परवानगी दिली. तक्ता त्या उंचीपेक्षा उंच असला तर तो उंच दिसतो. परंतु आपण मालमत्ता वापरु नये

सीएसएस उंचीची प्रॉपर्टी तुम्हाला जर सीएसएस प्रॉपर्टी वापरत असेल तर त्यापेक्षा जास्त कंटेंटसह काय होते हे ठरवण्यासाठी आपण उंची मर्यादित करू शकता.

टेबलवरील किमान उंची सेट करण्यासाठी, लिहा:

<सारणी शैली = "उंची: 30 नाम;" >

ही सारणी किमान 30 मीटर उंची आहे.

टेबलचे डावी / उजवी बाजू (एचस्पेस) आणि शीर्ष / तळ (विवरपेस) सुमारे दोन विशेषता आणि जोडलेली जागा आपण त्याऐवजी शैली मालमत्तेचा वापर करावा.

उभ्या स्पेस 20 पिक्सेल्स आणि आडव्या जागा 40 पिक्सल वर सेट करण्यासाठी, लिहा:

<सारणी शैली = "समास: 20px 40px;"

या सारणीमध्ये 20 पिक्सेलची एक विभक्त जागा आणि 40 पिक्सेलचा एक hspace आहे.

विशेषता एक बुलियन विशेषता आहे जी सारणीतील सामग्री मूळ घटक किंवा विंडोच्या काठावर लपवावी किंवा क्षैतिज स्क्रोलिंगला प्रभावी करते हे स्पष्ट करते. त्याऐवजी, आपण CSS गुणधर्म वापरून प्रत्येक टेबल सेलच्या रॅपिंग वैशिष्ट्यांची व्याख्या करणे आवश्यक आहे.

भरपूर मजकूरासह स्तंभ बनविण्यासाठी, लिहा:

<सारणी>

style = "white-space: nowrap;" > हा एक टन सामग्रीसह एक स्तंभ आहे. पण कंटेनरपेक्षा जाड असेल तर मजकूर पुढील ओळीवर लपेटो नको, परंतु त्याऐवजी ब्राऊजर विंडोला सर्व सामग्री पाहण्यासाठी आडवे स्क्रोल करा.

शेवटी, विशेषतेत प्रत्येक सेलची सामुग्री सेलमध्ये अनुलंब सरळ कशी ओळखावी हे स्पष्ट करते. या अवैध गुणधर्माच्या ऐवजी, आपण ज्या सेलची आपण संरेखन बदलू इच्छिता त्या प्रत्येक सेलवर सीएसएस प्रॉपर्टी वापरावी. आपल्याला या शैलीचे परिणाम लक्षात येणार नाहीत, जोपर्यंत सेलची सामग्री इतर, मोठ्या पेशींनी निर्माण केलेल्या उपलब्ध जागेपेक्षा कमी असेल.

सेलला तळाशी संरेखित करण्यासाठी (मधल्या ऐवजी, डीफॉल्ट म्हणून) लिहिण्यासाठी, लिहा:

<सारणी>

हा सेल उर्वरितपेक्षा अधिक लांब आहे आणि त्यामुळे उंची उंच होईल. तर आपल्याला दिसेल की अनुलंब संरेखित सेल एकाकी आहे.
शैली = "अनुलंब-संरेखन: तळाशी;" > तळाशी असलेली सामग्री.
मधल्या सामग्री