چگونه در html جدول بسازیم؟

[سیدرضا بازیار 257]

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

مثلا:

ستون اول: دو سطر

ستون دوم: سه سطر

ستون سوم: چهار سطر

ستون پنجم: یک سطر

داشته باشه ( http://codepen.io/anon/pen/lAnqJ )

و بشه برای هر سطر یه بک گراند و یه اندازه مشخص گذاشت و حاشیه ها رو درست کرد و...

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

[imanfakhar 26231]

http://codepen.io/imanfakhar/pen/wKcLD

[سیدرضا بازیار 257]

من دقیقا به جدول زیر نیاز دارم

یه جدول مشکی میخوام که 5 جدول مثل تصویر بالا توی اون باشه و میخوام توی اون 5 جدول مطلب بزارم

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

[Alireza Xn 1644]

از این سرویس آنلاین استفاده کنید :

http://www.quackit.com/html/html_table_generator.cfm

[imanfakhar 26231]

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

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

<table>
<thead>
  <tr>
   <th>
    سلول هدر
   </th>
  </tr>
</thead>
<tbody>
  <tr>
   <td>
    سلول اصلی
   </td>
  </tr>
<tbody>
<tfoot>
  <tr>
   <td>
    سلول زیری
   </td>
  </tr>
</tfoot>
</table>

[سیدرضا بازیار 257]

از این سرویس آنلاین استفاده کنید :

http://www.quackit.com/html/html_table_generator.cfm

این ابزار توانایی ساختن کد من رو نداره

هر چه کد آقای فخار رو ویرایش میکنم باز هم خراب میشه

[imanfakhar 26231]

style

.myTable {
width: 800px;
}
.myTable td {
border:5px #000 solid;
}
.myTableTd1 {
background-color: #F0F0F0;
height: 100px;
}
.myTableTd2 {
background-color: #00FF00;
height: 100px;
}
.myTableTd3 {
background-color: #FF00FF;
}
.myTableTd4 {
background-color: #0066CC;
}
.myTableTd5 {
background-color: #CC0000;
height: 300px;
}

html

<table align="center" cellpadding="10" cellspacing="0" class="myTable">
<tr>
  <td class="myTableTd1"> </td>
  <td class="myTableTd4"> </td>
</tr>
<tr>
  <td class="myTableTd2"> </td>
  <td rowspan="2" class="myTableTd3"> </td>
</tr>
<tr>
  <td class="myTableTd5"> </td>
</tr>
</table>

[.Ibrahim 65]

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

[فرحان 997]

سلام. اگر قصد طراحی صفحه دارید بهتره همچین طراحی ای رو توسط bootstrap انجام بدید. هم از تیبل استفاده نمیکنه و منعطفه و هم همه چیزش آمادست فقط کافیه کمی در مورد نحوه استفادش توی وب جستجو کنید.div های تو در تو میسازید و کلاس ها رو بهشون اختصاص میدید، خودش استایل دهی میکنه.

موفق باشید.

[Mobin 1669]

برای این کارها بهتره از div استفاده کنید انعطاف بیشتری دارند

<style type="text/css">
.base
{
    width:500px;
}
.br
{
    border:1px solid gray;
    margin: 1px;
}
.one
{
    width:496px;
    display: block;
}

.two
{
    width:246px;
}
.left
{
    float:left;
}

.right
{
    float:right;
}

.large
{
    height: 100px;
}
.small
{
    height:50px;
}
</style>
<div class="base">

    <div  class="one large br">
    a1
    </div>    
    <div style="clear: both;"></div>
    <div class="two large left br">
    s2
    </div>
    <div class="two large right br">
    s3
    </div>    
    <div style="clear: both;"></div>
    <div class="two large left br">
    s4
    </div>
    <div class="two large right br">
    s5
    </div>     
    <div style="clear: both;"></div>
    <div class="one small br">
    a6
    </div>  
    <div style="clear: both;"></div>
    <div class="two small left br">
    s7
    </div>
    <div class="two small right br">
    s8
    </div>     

</div>

[.Ibrahim 65]

مرسی از دوستانی که پاسخ دادند.

این هم یه سایت ساده و کاربردی برای طراحی آنلاین جدول هست که امکانات خوبی داره.

tablesgenerator

ولی خب همونجوری که lord_viper گفتند، استفاده از div انعطاف پذیری بیشتری داره و از لحاظ سئو بهتره.

ویرایش شده مهر 93 توسط .Ibrahim