درج جدول در مطلب

[TARLI 1]

سلام

من میخوام یه جدول توی مطالب سایتم قرار بدم

 

وقتی با ورد جدول رو درست می کنم و توی محتوا کپی میکنم کد زیادی تولید میکنه تازه جدول هم به صورت نامرتب میاد

 

با کدهای

html

که وارد میکنم یه سری کدها مثل رنگ حاشیه رو خودکار حذف میکنه

 

چه جوری میتونم یه جدول توی مطالبم داشته باشم؟

[topmihan 141]

شما جدول html ساده بدون هیچ استایلی بزنید و داخل ماژول بیارید

بعد داخل پوشه css فایل تمپلیت رو باز کنید و و کلاس هایی برای زیبایی جدولتون بنویسید و سپس اون کلاس ها رو به تگ های جدول اختصاص بدین

[TARLI 1]

شما جدول html ساده بدون هیچ استایلی بزنید و داخل ماژول بیارید

بعد داخل پوشه css فایل تمپلیت رو باز کنید و و کلاس هایی برای زیبایی جدولتون بنویسید و سپس اون کلاس ها رو به تگ های جدول اختصاص بدین

شرمنده ولی میشه یه نمونه کوچیک کلاس بنویسین و بعد چه جوری اون کلاس رو به جدول اختصاص بدم یعنی توی کدوم تگ

[topmihan 141]

دوست عزیز اگه میشه شما جدول اچ تی ام ال خودتون رو بنویسید و داخل سایتتون منتشر کنید تا بعد با هم گام به گام پیش بریم کد نویسیشو

[TARLI 1]

دوست عزیز اگه میشه شما جدول اچ تی ام ال خودتون رو بنویسید و داخل سایتتون منتشر کنید تا بعد با هم گام به گام پیش بریم کد نویسیشو

این که خیلی عالیه فقط من الان نمیتونم شما میتونین صبح زود پای سیستم باشین ببخشین که به این راحتی میگم ولی واقعا الان نمیتونم خیلی هم دوست دارم که یادبگیرم

[topmihan 141]

مکشلی نیست 

اتفاقا منم الان دارم درس میخونم

صبح زود که نه والا

ولی فکر کنم 11 خونه باشم و بیام پای سیستم

شما هر وقت وقت کردین جدولتونو ایجاد کنید و روی سایت بذارین و در همین تاپیک بگید چه تغییراتی رو میخواین بهش بدین

منکه که اومدم روش کار میکنم بعد بهتون توضیحات رو میدم و کد هاشم بهتون میدم تا داخل سایت بذارین

[TARLI 1]

خیلی خیلی ممنون

------------------------------------------------------------------------------------------------------------------

سلام من جدول رو توی صفحه زبان قرآن گذاشتم

ابتدا جدول رو با کد

html

نوشتم و توی محتوای جوملا کپی کردم . بعد از کپی تمام تغییرات جدول از بین رفت و تغییرات سایز و رنگ و ... رو دستی از جوملا انجام دادم

در ضمن جدول رو نمی تونم وسط صفحه بذارم

جدول هم به جای راست به چپ ؛ چپ به راست اومده که اینم نتونستم درست کنم

بین سطرها و ستونها هم می خوام خط باشه

داخل فایل

typo.css

قالبم از شش فونت مختلف استفاده شده ولی پیشفرض فونت یکانه میخوام بتونم از فونتهای دیگه هم استفاده کنم یا حتی یه فونت عربی خوب خودم اضافه کنم که برای کلمات عربی ازش استفاده کنم

از کمکتون ممنون

[topmihan 141]

سلام دوست عزیز

فعلا این کد رو در همون فایل addons.css خودتون بذارید

table {
margin: auto;
border: solid 2px black;
}
tr th{background-color: yellow;}
tr{border-bottom: solid 2px;}
th{border-left: solid 2px;}
td{border-left: solid 2px;}
tr td{background-color: rgb(163, 245, 202);}

------------------------------------------------------------------------------------------------------------------

درضمن برای اضافه کردن فونت جدید

در پوشه فونت های قالبتون فونت مورد نظر رو آپلود کنید

سپس در همین typo.css با استفاده از کد زیر فونت رو الحاق کنید

 @font-face {
font-family: 'bardiya';
src: url('../fonts/bardiya.eot?#') format('eot'), /* IE6–8 */
url('../fonts/bardiya.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('../fonts/bardiya.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

فقط بجای تمام bardiya ها که در کد فوق اومده نام فونت جدید رو بذارید

سپس با اضافه کردن کد font-family: titr; به تگ مورد نظرتون فونت اون تگ رو تغییر بدین

البته اسم فونت رو بازهم دلخواه بذارید

[TARLI 1]

سلام به دوست عزیز

 

ممنون که پاسخ دادین

 

حالا چند تا سوال دارم

 

الان این کدی که برای جدول تعریف کردیم یک کلاسه؟

 

چرا توی فایل

addons

گذاشتیم و توی فایل قالب نذاشتیم؟

 

از این به بعد تمام جداولی که من توی محتوای جوملا بنویسم به همین مدل میان؟

 

اگر بخوام چند نوع مدل جدول یا همون کلاس داشته باشم باید چیکار کنم؟

 

توی کد شما کدی برای وسطچین کردن جدول نیست ولی جدول میاد وسط صفحه چرا؟

 

همه کد رو متوجه شدم و یه سری تغییرات مورد نظرم رو هم دادم اما میخوام دور جدول خط نداشته باشم وقتی خط سوم کد شما رو پاک می کنم فقط خط بالا و خط راست جدول حذف میشه اگرهم از

td و tr

حذف کنم که بقیه خطوط هم حذف میشن . برای این مورد باید چه کنم؟

 

و آخرین سوال : متن سطر اول رو تونستم وسط چین کنم ولی متن سلولها رو نتونستم برای این کار چه کدی و کجا باید اضافه شه؟

 

کد به اینصورت تغییر کرد

table {
margin: auto;
border: solid 2px rgb(0,64,128);
}
tr th{ border-bottom: solid 5px rgb(0,64,128); text-align:center;}
tr{border-bottom: solid 2px rgb(0,117,234);}
th{border-left: solid 2px rgb(0,117,234);}            
td{border-left: solid 2px rgb(0,117,234); }
tr td{ text-align: center;}

[topmihan 141]

 

سلام به دوست عزیز

علیک سلام

ممنون که پاسخ دادین

خواهش میکنم وظیفه هستش

حالا چند تا سوال دارم

درخدمتم

الان این کدی که برای جدول تعریف کردیم یک کلاسه؟

کلاس که نه با سلکتور هستش ( تگ هایی که شناخته شده هستن در html در css بشکل سلکتور شناخته میشه و نیاز به نوشتن بشکل کلاس یا آی دی نیستش مثل همین تیبل و سایر تگ های اون)

چرا توی فایل

addons

گذاشتیم و توی فایل قالب نذاشتیم؟

والا من سورس رو که نگاه کردم داخل این فایل سلکتورها بودش منم همونجا گذاشتم دیگه و دیدم ok شد گفتم شما هم همونجا بذاری

از این به بعد تمام جداولی که من توی محتوای جوملا بنویسم به همین مدل میان؟

آره دیگه جداول باید از سلکتور همون تگ پیروی کنن 

اگر بخوام چند نوع مدل جدول یا همون کلاس داشته باشم باید چیکار کنم؟

برای اینکار باید این سلکتورها پاک بشه و کلاس براش نوشته بشه و داخل سورس اچ تی ام ال به تگ ها کلاس اختصاص بدیم تا هر جدول از کلاس خودش پیروی کنه

توی کد شما کدی برای وسطچین کردن جدول نیست ولی جدول میاد وسط صفحه چرا؟

margin رو اتو گذاشتم این کد در اکثر موقعیت ها فاصله رو از تمام طرف ها درست میکنه

همه کد رو متوجه شدم و یه سری تغییرات مورد نظرم رو هم دادم اما میخوام دور جدول خط نداشته باشم وقتی خط سوم کد شما رو پاک می کنم فقط خط بالا و خط راست جدول حذف میشه اگرهم از

td و tr

حذف کنم که بقیه خطوط هم حذف میشن . برای این مورد باید چه کنم؟

برای حذف کادر دور باید در این استایل 

table {
margin: auto;
border: solid 2px black;
} 

بوردر رو حذف کنید

و آخرین سوال : متن سطر اول رو تونستم وسط چین کنم ولی متن سلولها رو نتونستم برای این کار چه کدی و کجا باید اضافه شه؟

td های مربوطه رو کد استایل دادی در اچ تی ام ال align="right" بجای رایت بنویس center

کد به اینصورت تغییر کرد

table {

margin: auto;

border: solid 2px rgb(0,64,128);

}

tr th{ border-bottom: solid 5px rgb(0,64,128); text-align:center;}

tr{border-bottom: solid 2px rgb(0,117,234);}

th{border-left: solid 2px rgb(0,117,234);}            

td{border-left: solid 2px rgb(0,117,234); }

tr td{ text-align: center;}

 

[TARLI 1]

سلام و بازم ممنون

برای حذف کادر دور جدول من همون خط بوردر رو حذف می کنم ولی فقط خط بالای جدول و سمت راست جدول حذف میشه ولی خط پایین و سمت چپ میمونه چون این دو تا خط با تگهای تی دی و تی آر هم رسم میشه من میخوام هر چهار طرف جدول خط نداشته باشه

و جواب آخرین سوال رو به علت بهم ریختگی متن فارسی انگلیسی متوجه نشدم

و برای داشتن مدلهای متفاوت جدول میشه از همین سلکتور استفاده کرد ولی توی کد از داخل محتوای جوملا دستکاری کرد و به شکل دلخواه استفاده کرد یعنی کدهایی که از داخل محتوای جوملا اضافه کنیم حذف نمیشن؟

------------------------------------------------------------------------------------------------------------------

اگه منظورتون از جواب آخرین سوال اینه که از توی محتوای جوملا تغییرش بدم در این صورت باید یه دونه یه دونه این کار رو بکنم یعنی از توی سلکتورها نمیشه گفت که وسط چین بشن؟

راستی فرق تگ تی دی با تگ تی آر تی دی چیه؟

نمیدونم اینی که میگم درسته یا نه؟ من کد

font-size:22px;

رو توی تگ تی دی میذارم عمل نمیکنه ولی توی تگ تی آر تی دی میذارم جواب میده میخواستم ببینم با اینکه سی اس اس خودش این کد رو توی تگ تی دی میده چرا پس جواب نمیده ؟ و فرق این دو تگ چیه؟

در نهایت اگه براتون زحمتی نیست درست کردن کلاس برای جداول و اختصاص اونا رو هم به همین روش خودتون مرحله به مرحله بگین چون من مدلهای مختلف جدول رو لازم دارم

ممنونم

[topmihan 141]

سلام برشما

عرضم خدمت شما که تگ td یا tr td شاید گفت جدا نیستن کلا در جداول اچ تی ام ال یه تی دی داریم

وقتی مینویسیم tr td یعنی تی دی هایی که در تی ار هستن میشه گفت ارث بری هستش. در بعضی مواقع باید کد رو بصورت ارث بری نوشت تا جواب بده

---------

بودر کلی برداشته میشه و اون بوردر پایین و چپ از بوردر تی دی ها هستش که گرفته میشه حذفش کرد ولی یکم دردسر دار میشه واستون یعنی باز باید فقط به همون تی دی استایل جدا بدیم

نظر شخصی من: بوردر کلی دور جدول قشنگی بیشتری میده

ولی اگه میخواین چشم استایلشو مینویسم

فقط شرمنده چون من امروز عصر امتحان دارم الان نمیتونم وقت بذارم باید برم درسمو بخونم

انشالله امشب کلاس نویسی رو برای جداول مختلف همراه با کد اچ تی ام ال بصورت کامل واستون مینویسم

حق یارتان

------------------------------------------------------------------------------------------------------------------

سلام

دوست عزیز اگه لطف کنید بگین میخواین هر مدل کار چطور باشه تا کلاس بدم بهتره

------------------------------------------------------------------------------------------------------------------

خب دوست عزیز

همونطور که گفتم نوعی که میخوای جداولت داشته باشن رو بگو تا بهتر بتونم بهت کد بدم

من خودم یه جدول ایجاد کردم http://ar.topmihan.ir

این جدول با کد های زیر است:

کد اچ تی ام ال که در ماژول اچ تی ام ال جوملا گذاشته شد

<table>
<tbody>
<tr class="tr1"><th class="th1 td1">نام سایت</th><th class="th1 td1">نام سایت</th><th class="th1 td1">نام سایت</th><th class="th1">نام سایت</th></tr>
<tr class="tr1">
<td class="td1 td1b">دیزاین لوپر</td>
<td class="td1 td1b">تاپ میهن</td>
<td class="td1 td1b">تاپینا</td>
<td class="td1b">تاپ نیاز</td>
</tr>
<tr class="tr1">
<td class="td1 td1b">تاپ افزار</td>
<td class="td1 td1b">تاپ فروم</td>
<td class="td1 td1b">میهن مهر</td>
<td class="td1b">تمپ تاپ</td>
</tr>
<tr>
<td class="td1 td1b">سایت تمپلیتز</td>
<td class="td1 td1b">زیکزاک</td>
<td class="td1 td1b">تاپ سیکس</td>
<td class="td1b">تاپ رند</td>
</tr>
</tbody>
</table>

و کد css که در فایل تمپلیت . سی اس اس گذاشته شد

.tr1{border-bottom: solid 2px #1D9C31;}
.td1{border-left:solid 2px #1D9C31;
line-height: 30px;
width: 100px;}
table {
margin: auto;
text-align: center;
font-weight: bold;
}
.th1{text-align: center !important;
background-color: yellow;
line-height: 40px;
width: 100px;
}
.td1b{background-color: rgb(211, 211, 168);}

این ها کلاس هستن

اگه دقت کنی در تگ های اچ تی ام ال نوشتم class="نام کلاس"

لطفا هر وقت آنلاین شدی هم در مورد نوع جداولی که میخوای توضیح بده و هم اگه سوال داشتی در خدمتم

حق یارتان

[TARLI 1]

سلام ممنون از اینکه وقت میذارین با وجود امتحاناتون

ان شاء الله که موفق باشین

برای جداول متوجه شدم که چطوری میشه کلاس تعریف کرد و ازش استفاده کرد و باز هم چندتا سوال دیگه

شما این کد جدول رو توی ماژول کد نوشتین میشه از این کلاسها توی کد مطالب جوملا استفاده کرد یعنی برای هر جدول مجبور نباشم یه ماژول بنویسم بلکه همین اختصاص کلاس رو توی محتوای جوملا انجام بدم

!important

که جلوی یکی از کدها نوشتین چیه؟

میشه برای تگ

table

هم کلاس جداگانه نوشت و ازش استفاده کرد؟

بازم ممنون

------------------------------------------------------------------------------------------------------------------

سلام

سوال اولم رو خودم چک کردم و شد

اما جایی که از دو تا کلاس استفاده کردین فرقی میکنه کدوم کلاس اول نوشته بشه ؟ اگر هر دو کلاس یک تکه کد یکسان داشته باشند کدوم یکی رو اعمال میکنه؟

[topmihan 141]

سلام دوست عزیز

خواهش میکنم انجام وظیفه هستش ، انشالله شما هم همیشه موفق باشین

در ابتدا باید بگم وقتی کلاسی مینویسین از اون کلاس هر چندبار که بخواین میتونید در هرجای سایتتون استفاده کنید

ایمپورتنت به معنای تاکید هستش ، گاهی پیش میاد یه کدی مینویسی که کد دیگری برای همون دستور واسش نوشته شده با گذاشتن کلمه ایمپورتنت اعلام میگنید که از این دستور استفاده کنه

بله برای همه تگ ها میشه استایل نوشت ، شما کلاستون رو بنویسین و همینجوری که من به تگ های دیگه دادم شما هم به تگ تیبل بدین

در جایی که تگی میخواد بیش از یک کلاس بگیره ترتیب اهمیت نداره

و سوال آخرتون هم فکر کنم بالاترین دستور خوانده میشد ( بازم دقیق یادم نیست)

حق یارتان

[TARLI 1]

ممنونم واقعا زحمت کشیدین

[ibmnabi 0]

با سلام

من سایتی دارم با آدرس www.jska.ir  صفحه نخستم مطلب همیشه ثابته میخواهم در منوی اخباری که ایجاد کرده ام مطالب بصورت مجزا و هر مطلب با تاریخ های مختلف در کادر قرار بگیرند ، آیا ماژولی برای این کار وجود دارد

[رضاقاسمی 1,539]

لطفا طبق قوانین سوال خود را در تاپیک جدید و واضح تر بیان کنید