کمک در ساخت جدول

Codes · 16 سپتامبر 2014

سلام،برای درست کردن جدول چطور بین آنها فاصله ایجاد کنم؟ من هر کاری کردم نامرتب می شن! لطفا کمک کنید. ممنون
کدهایی ک من نوشتم به صورت زیر هست:

HTML:

<html>
<head>
    <title>Table Rowspan</title>
</head>
<body>
<table border="1">
    <caption>Column in a Row</caption>
    <tr><th>Column 1</th>
        <th>Column 2</th>
            <th>Column 3</th>
        <th>Column 4</th></tr>
    <tr><td rowspan="0">Row 1,Col 1</td>
            <td rowspan="1">Row 1,Col 2</td>
        <td rowspan="2">Row 1,Col 3</td>
        <td rowspan="3">Row 1,Col 4</td></tr>
    <tr><td rowspan="0">Row 2,Col 1</td>
            <td rowspan="1">Row 2,Col 2</td>
        <td rowspan="2">Row 2,Col 3</td>
        <td rowspan="3">Row 2,Col 4</td></tr>
    <tr><td rowspan="0">Row 3,Col 1</td>
            <td rowspan="1">Row 3,Col 2</td>
        <td rowspan="2">Row 3,Col 3</td>
        <td rowspan="3">Row 3,Col 4</td></tr>
    <tr><td rowspan="0">Row 4,Col 1</td>
            <td rowspan="1">Row 4,Col 2</td>
        <td rowspan="2">Row 4,Col 3</td>
        <td rowspan="3">Row 4,Col 4</td></tr>
</table>
</body>
</html>

k-boy · 17 سپتامبر 2014

مقدار rowspan رو تو همه موارد مساوی بزارین.

Codes · 17 سپتامبر 2014

ممنونم.ولی من می خوام سایز هر سطر مساوی باشه ولی سایز ستون ها به مرور بیشتر باشه. یعنی اینطوری:http://up.pnu-club.com/images/unrhouf0rkoci7cptgh.png

لطفا کمک کنید.

k-boy · 17 سپتامبر 2014

از rowspan تو این موردی که شما مدنظرتونه استفاده نکردم تابحال. بیشتر برای از بین بردن وابستگی بین ستون و ردیف نسبت بهم استفاده میشه.
اگه بشه ایشون حتما میدونن @MihanV

homayo0on · 17 سپتامبر 2014

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

HTML:

<html>
    <head>
        <title>Table Rowspan</title>
    </head>
    <body>
        <table border="1" cellpadding="5" cellspacing="0">
            <caption>Column in a Row</caption>
            <thead>
                <tr>
                    <th width="100px">Column 1</th>
                    <th width="110px">Column 2</th>
                    <th width="120px">Column 3</th>
                    <th width="130px">Column 4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td height="25px">Row 1,Col 1</td>
                    <td>Row 1,Col 2</td>
                    <td>Row 1,Col 3</td>
                    <td>Row 1,Col 4</td>
                </tr>
                <tr>
                    <td height="45px">Row 2,Col 1</td>
                    <td>Row 2,Col 2</td>
                    <td>Row 2,Col 3</td>
                    <td>Row 2,Col 4</td>
                </tr>
                <tr>
                    <td height="60px">Row 3,Col 1</td>
                    <td>Row 3,Col 2</td>
                    <td>Row 3,Col 3</td>
                    <td>Row 3,Col 4</td>
                </tr>
                <tr>
                    <td height="80px">Row 4,Col 1</td>
                    <td>Row 4,Col 2</td>
                    <td>Row 4,Col 3</td>
                    <td>Row 4,Col 4</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

پ . ن : تو پست قبلیتون فکر کنم سطر و ستون رو هم برعکس گفتید

Codes · 17 سپتامبر 2014

به نقل از homayo0on :
احتمالاً شما مفهوم عملکرد rowspan رو اشتباه گرفتید.
کار این خاصیت چیز دیگس و استفاده اشتباه از اون موجب بهم ریختگی جدولتون شده
codes........
پ . ن : تو پست قبلیتون فکر کنم سطر و ستون رو هم برعکس گفتید

بله حق با شماست، من سطر و ستون رو برعکس گفتم!:general705: عذر میخوام:general401:
ممنون از کد ولی من کد رو که وارد کردم مرورگرم هنگ کرد! این کد thead و tbody که نوشتید چیه؟

homayo0on · 17 سپتامبر 2014

به نقل از Codes :
بله حق با شماست، من سطر و ستون رو برعکس گفتم!:general705: عذر میخوام:general401:
ممنون از کد ولی من کد رو که وارد کردم مرورگرم هنگ کرد! این کد thead و tbody که نوشتید چیه؟

والا این کد چیزی نداشت که باعث شه مرورگر هنگ کنه، مرورگرت احتمالا داغونه !!!

thead محدوده هدر جدول رو مشخص میکنه
tbody محدوده بدنه جدول رو مشخص میکنه
tfoot محدود فوتر جدول رو مشخص میکنه که اینجا نداشتیم نذاشتم

(اگر دوستشون نداری یا از قیافشون خوشت نمیاد حذفشون کن

اینجا چندان تاثیری نمیزاره وجودشون )

هر td یک سلول ایجاد میکنه که تو سطر فعلی میفته.
طبیعتاً هرچی تعداد td در یک سطر بیشتر شه ستون های بیشتری خواهیم داشت
هر tr هم یه سطر جدید میسازه

خاصیت rowspan توی تگ td کارش اینه که سلول رو جوری تنظیم میکنه که دو ستون رو اشغال کنه
خاصیت colspan توی تگ td کارش اینه که سلول رو جوری تنظیم میکنه که دو سطر رو اشغال کنه

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

Codes · 17 سپتامبر 2014

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

MihanV · 17 سپتامبر 2014

یه استایل ریز هم دادم :
دمو :

کد:

<style>

td, th {
    background: #f5f5f5;
font-family:tahoma;
font-size:8pt;
    font-weight: normal;
    width: 80px;
    height: 2rem;
    border: 0px solid #ccc;
    text-align: center;
    padding:5px;
}

th {
    background: #ddd;
    border-color: white;
}

</style>

<table>
              <thead>
                <tr>
                  <th>x1</th>
                     <th>x2</th>
               
                </tr>
              </thead>
              <tbody>

<tr>
<td>A</td>
<td>B</td>
</tr>

<tr style="height:50px">
<td>A</td>
<td>B</td>
</tr>
   
<tr style="height:70px">
<td>A</td>
<td>B</td>
</tr>

<tr style="height:100px">
<td>A</td>
<td>B</td>
</tr>
 
<tr style="height:130px">
<td>A</td>
<td>B</td>
</tr>


              </tbody>
            </table>

کمک در ساخت جدول

Codes

Registered User

k-boy

Registered User

Codes

Registered User

k-boy

Registered User

homayo0on

Registered User

Codes

Registered User

homayo0on

Registered User

Codes

Registered User

MihanV

مدیر بازنشسته

بک‌لینک