استفاده از table برای طراحی سایت

fereshte22

fereshte22

Member
سلام
من یه مشکلی داشتم.البته میدونم که خیلی ابتدایی است ولی نمیدونم چطوری باید حلش کنم.
ببینید من میخواهم که از table برای طراحی قالب سایتم استفاده کنم.
فرض کنید که این table شامل دو ستون و چند سطر است.در ستون اول چیزهایی مثل login و جستجو و منوهای سایت قرار میگیرد و در ستون دوم گریدویو و دیتالیست قرار میگیرد.
ولی مشکل اینه که وقتی در ستون دوم این گریدویو قرار میگیرد چیزهایی که درستون اول وجود دارد به پایین کشیده میشود و طراحی به هم میخورد
برای حل این مشکل باید چیکار کنیم؟
 
I

iran480

Member
دوست عزیز شما باید از درصد برای اندازه ها استفاده کنید.
مثلاً به فرض اگر دو تا ستون دارید ، به td هر کدوم مقدار 50% رو بدید تا هر کدوم نصف جدول بگیرن. بهتره اندازه ی خود جدول رو هم با درصد تعیین کنید تا مشخص بشه چند درصد از صفحه رو بگیره.
 
WindowsLab

WindowsLab

Member
سلام
نمونه ای در تکمیل گفته دوست عزیز iran480:
کد: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>جدول - مجیدآنلاین</title>
    </head>
    <body>
        <table width=100% height=100% cellspacing=0 style="font-family:Tahoma;font-size:smaller;border:solid 1px red;">
            <thead>
                <tr height=5%>
                    <td colspan=2 align="center"  style="border-bottom:solid 1px red;">
                        Head, Welcome to Our Site!
                        {Banners}
                    </td>
                </tr>
            </thead>
 
            <tbody>
                <tr height=90%>
                    <td width=20%>
                        Login,Search,...
                    </td>
                    <td width=80% style="border-left:solid 1px red;">
                        GridView
                    </td>
                </tr>
            </tbody>
 
            <tfoot>
                <tr height=5%>
                    <td colspan=2 align="center" style="border-top:solid 1px red;">
                        Footer, CopyRight 2008
                        {Banners}
                    </td>
                </tr>            
            </tfoot>
        </table>
    </body>
</html>

کد: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>جدول - مجیدآنلاین</title>
    </head>
    <body>
        <table width=100% height=100% cellspacing=0 style="font-family:Tahoma;font-size:smaller;border:solid 1px red;">
            <tbody>
                <tr>
                    <td width=20%>
                        Login,Search,...
                    </td>
                    <td width=80% style="border-left:solid 1px red;">
                        GridView
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

در صورتی خواستید جدول تحت هیچ شرایطی جابه جا نشود از کد زیر استفاده کنید:
کد: 
Style="position:absolute;Top:auto;Left:auto;"

یاعلی
موفق باشید
 
آخرین ویرایش:
Soldier

Soldier

Member
من هر وقت از Table استفاده کردم ، پدرم در اومده !
DrHessam.gif


از تگ Div استفاده کنی بهتره هم برای خودت هم برای وبت !
birgits_snill.gif


این تجربه من تو دریم ویور ئه
128fs318181.gif
 
fereshte22

fereshte22

Member
سلام
از توجه و راهنمایی دوستان ممنون هستم.
راستش مشکل من اینه که طراحی از قسمت ارتفاع height به هم میخورد.فرض کنید در ستون اول این منوها را قرار دادهایم وقتی گریدویو را در ستون سمت چپ قرار میدهیم همه منوهایی که در ستون سمت راست قرار دارند به سمت پایین کشیده میشود.
من سعی کردم با تعیین درصد برای height هر ستون این مشکل را حل کنم ولی فرقی نکرد.
میشه دوستان من را راهنمایی کنند.
 
peyman1987

peyman1987

Member
دوست عزیز لطف کنین کدی که نوشتین رو قرار بدین تا بیشتر و بهتر بشه بهتون کمک کرد.
 
fereshte22

fereshte22

Member
سلام
طراحی من (البته همراه با گریدویو و منوها) به صورت زیر است.البته من از table محیط دات نت استفاده کردم نه از frontpage


کد: 
 <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
                <tr>
                    <td style="width: 80%; height: 90%">
                        <asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False" BorderColor="NavajoWhite"
                            BorderStyle="Solid" DataKeyNames="number" Font-Names="Tahoma" Font-Size="Small"
                            ForeColor="DarkBlue" Width="205px">
                            <Columns>
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <table style="width: 426px">
                                            <tr>
                                                <td style="width: 123px">
                                                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/administration/Images/" + Eval("namepicture1") %>'
                                                        Visible='<%#container.dataitem("visible1")%>' />
                                                </td>
                                                <td style="width: 100px">
                                                    &nbsp;<br />
                                                    <table style="width: 400px">
                                                        <tr>
                                                            <td style="width: 161px; text-align: right">
                                                            </td>
                                                            <td style="width: 300px; text-align: right;">
                                                                &nbsp; &nbsp;
                                                                <%#container.dataitem("name") %>
                                                                &nbsp;
                                                                <asp:Image ID="Image3" runat="server" ImageUrl="D:/Inetpub/wwwroot/e-shop/administration/images/tiles.jpg" /></td>
                                                        </tr>
                                                        <tr>
                                                            &nbsp; &nbsp; &nbsp;
                                                            <td style="width: 161px; text-align: right">
                                                            </td>
                                                            <td style="width: 300px; text-align: right">
                                                                <%#Container.DataItem("joziat")%>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="width: 161px; text-align: right">
                                                            </td>
                                                            <td style="width: 300px; text-align: right">
                                                                قیمت:
                                                                <%#Container.DataItem("price")%>
                                                                ریال
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="width: 161px; text-align: right">
                                                            </td>
                                                            <td style="width: 300px; text-align: right">
                                                                <input class="field" dir="ltr" maxlength="3" name='fQty_<%#container.dataitem("number")%>'
                                                                    style="direction: rtl; text-align: center; width: 34px; height: 11px;" value="1">
                                                                تعداد
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                        </tr>
                                                        <tr>
                                                            <td style="width: 161px; text-align: right">
                                                            </td>
                                                            <td style="width: 300px; text-align: right">
                                                                <a href='joziatkala.aspx?ID=<%#Container.DataItem("price")%>'>جزئیات بیشتر </a>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="width: 161px; text-align: right">
                                                            </td>
                                                            <td style="width: 300px; text-align: right">
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                        </tr>
                                                        <tr>
                                                            <td style="width: 161px; text-align: center">
                                                            </td>
                                                            <td style="width: 300px; text-align: center">
                                                                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                                                &nbsp; &nbsp;
                                                                <input alt='<%#Container.DataItem("price")%>' name='btnBuy_<%#Container.DataItem("price")%>'
                                                                    src="Images/addtobasket-f.gif" type="image">
                                                                &nbsp; &nbsp; &nbsp;&nbsp;
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <RowStyle BackColor="White" />
                            <HeaderStyle BackColor="White" />
                        </asp:GridView>
                    </td>
                    <td style="width: 23%; height: 10%; background-color: cornflowerblue">
                        <table cellpadding="0" cellspacing="0" style="font-weight: bold; font-size: 11px;
                            width: 204px; font-family: tahoma; background-color: cornflowerblue">
                            <tr>
                                <td style="width: 100px; text-align: center">
                                    <asp:HyperLink ID="HyperLink1" runat="server" BackColor="AliceBlue" ImageUrl="~/images/1.gif"
                                        NavigateUrl="~/index.aspx" Width="20px"></asp:HyperLink></td>
                                <td style="width: 100px; text-align: left">
                                </td>
                                <td style="width: 100px; text-align: right">
                                    <asp:HyperLink ID="HyperLink8" runat="server" Font-Names="Tahoma" Font-Size="X-Small"
                                        ForeColor="White" NavigateUrl="~/index.aspx">صفحه اول</asp:HyperLink></td>
                            </tr>
                            <tr>
                                <td style="width: 100px; height: 16px; text-align: center">
                                    <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/images/1.gif" NavigateUrl="~/help.aspx"></asp:HyperLink></td>
                                <td style="width: 100px; height: 16px; text-align: left">
                                </td>
                                <td style="width: 100px; height: 16px; text-align: right">
                                    <asp:HyperLink ID="HyperLink5" runat="server" Font-Names="Tahoma" Font-Size="X-Small"
                                        ForeColor="White" NavigateUrl="~/help.aspx">راهنمایی</asp:HyperLink></td>
                            </tr>
                            <tr>
                                <td style="width: 100px; text-align: center">
                                    <asp:HyperLink ID="HyperLink3" runat="server" ImageUrl="~/images/1.gif"></asp:HyperLink></td>
                                <td style="width: 100px; text-align: left">
                                </td>
                                <td style="width: 100px; text-align: right">
                                    <asp:HyperLink ID="HyperLink7" runat="server" Font-Names="Tahoma" Font-Size="X-Small"
                                        ForeColor="White" Width="104px">مقررات و تعهدات</asp:HyperLink></td>
                            </tr>
                            <tr>
                                <td style="width: 100px; text-align: center">
                                    <asp:HyperLink ID="HyperLink4" runat="server" ImageUrl="~/images/1.gif" NavigateUrl="~/newsshop.aspx"></asp:HyperLink></td>
                                <td style="width: 100px; text-align: left">
                                </td>
                                <td style="width: 100px; text-align: right">
                                    <asp:HyperLink ID="HyperLink6" runat="server" Font-Names="Tahoma" Font-Size="X-Small"
                                        ForeColor="White" NavigateUrl="~/newsshop.aspx">اخبار فروشگاه</asp:HyperLink></td>
                            </tr>
                            <tr>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px">
                                </td>
                            </tr>
                        </table>
                        <table id="TABLE1" cellpadding="0" cellspacing="0" onclick="return TABLE1_onclick()"
                            style="font-size: 11px; border-left-color: midnightblue; border-bottom-color: midnightblue;
                            width: 163px; color: white; border-top-color: white; font-family: tahoma; background-color: cornflowerblue;
                            border-right-color: midnightblue">
                            <tr>
                                <td style="width: 42px; height: 14px; text-align: left">
                                    &nbsp;<asp:Label ID="Label2" runat="server" Font-Names="Tahoma" Font-Size="X-Small"
                                        Text="ایمیل" Width="35px"></asp:Label></td>
                                <td style="width: 100px; height: 14px">
                                    <input id="Username" runat="server" autocomplete="off" style="width: 80px; height: 12px"
                                        type="text" /></td>
                                <td style="width: 90px; height: 14px; text-align: right">
                                    <asp:CheckBox ID="CheckBox1" runat="server" Font-Names="Tahoma" Font-Size="XX-Small"
                                        ForeColor="White" Height="1px" Text="به خاطر داشتن؟" Width="113px" />&nbsp;</td>
                            </tr>
                            <tr>
                                <td style="width: 42px; height: 26px; text-align: left">
                                    <asp:Label ID="Label1" runat="server" Font-Names="Tahoma" Font-Size="X-Small" Text="رمز عبور"
                                        Width="46px"></asp:Label></td>
                                <td style="width: 100px; height: 26px">
                                    <input id="Password" runat="server" autocomplete="off" style="width: 80px; height: 12px"
                                        type="password" /></td>
                                <td style="width: 90px; height: 26px; text-align: center">
                                    <asp:Button ID="Button1" runat="server" Font-Names="Tahoma" Font-Size="X-Small" ForeColor="DarkBlue"
                                        Height="26px" Text="ورود" Width="37px" /></td>
                            </tr>
                        </table>
                        <table cellpadding="0" cellspacing="0" style="width: 266px">
                            <tr>
                                <td style="width: 100px">
                                </td>
                                <td style="width: 100px; text-align: right">
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px">
                                    <asp:TextBox ID="TextBox1" runat="server" dir="rtl" Font-Names="Tahoma" Font-Size="X-Small"
                                        ForeColor="DarkBlue" Height="12px" Width="80px"></asp:TextBox></td>
                                <td style="width: 100px; color: white; text-align: right">
                                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/Find.gif" Width="25px" />
                                    &nbsp;&nbsp; :
                                    <asp:Label ID="Label3" runat="server" Font-Names="Tahoma" Font-Size="Small" ForeColor="White"
                                        Text="جستجو" Width="28px"></asp:Label></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا