جدول

جدول HTML، با ستونهای موارد خاص

رنگ ندارد
سایز ندارد
متغیر ندارد

شما می توانید با ضمیمه کردن یک کلاس table CSS در تگ <table> HTML، یک جدول Bulma با ساختار زیر ایجاد کنید:

  • <table class="table"> بخش اصلی
    • thead بخش اختیاری بالای جدول
    • tfoot بخش اختیاری پایینی جدول
    • tbody بخش اصلی جدول
      • tr هر ردیفجدول
        • th یک سر ستون جدول
        • td یک ستون جدول

با افزودن کلاس اصلاح کننده is-bijare در یک <tr> می توانید یک ردیف جدول به عنوان انتخاب شده تنظیم کنید

Pos Team Pld W D L GF GA GD Pts Qualification or relegation
Pos Team Pld W D L GF GA GD Pts Qualification or relegation
1 Leicester City (C) 38 23 12 3 68 36 +32 81 Qualification for the Champions League group stage
2 Arsenal 38 20 11 7 65 36 +29 71 Qualification for the Champions League group stage
3 Tottenham Hotspur 38 19 13 6 69 35 +34 70 Qualification for the Champions League group stage
4 Manchester City 38 19 9 10 71 41 +30 66 Qualification for the Champions League play-off round
5 Manchester United 38 19 9 10 49 35 +14 66 Qualification for the Europa League group stage
6 Southampton 38 18 9 11 59 41 +18 63 Qualification for the Europa League group stage
7 West Ham United 38 16 14 8 65 51 +14 62 Qualification for the Europa League third qualifying round
8 Liverpool 38 16 12 10 63 50 +13 60
9 Stoke City 38 14 9 15 41 55 −14 51
10 Chelsea 38 12 14 12 59 53 +6 50
11 Everton 38 11 14 13 59 55 +4 47
12 Swansea City 38 12 11 15 42 52 −10 47
13 Watford 38 12 9 17 40 50 −10 45
14 West Bromwich Albion 38 10 13 15 34 48 −14 43
15 Crystal Palace 38 11 9 18 39 51 −12 42
16 AFC Bournemouth 38 11 9 18 45 67 −22 42
17 Sunderland 38 9 12 17 48 62 −14 39
18 Newcastle United (R) 38 9 10 19 44 65 −21 37 Relegation to the Football League Championship
19 Norwich City (R) 38 9 7 22 39 67 −28 34 Relegation to the Football League Championship
20 Aston Villa (R) 38 3 8 27 27 76 −49 17 Relegation to the Football League Championship

<table class="table">
    <thead>
    <tr>
        <th><abbr title="Position">Pos</abbr></th>
        <th>Team</th>
        <th><abbr title="Played">Pld</abbr></th>
        <th><abbr title="Won">W</abbr></th>
        <th><abbr title="Drawn">D</abbr></th>
        <th><abbr title="Lost">L</abbr></th>
        <th><abbr title="Goals for">GF</abbr></th>
        <th><abbr title="Goals against">GA</abbr></th>
        <th><abbr title="Goal difference">GD</abbr></th>
        <th><abbr title="Points">Pts</abbr></th>
        <th>Qualification or relegation</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th><abbr title="Position">Pos</abbr></th>
        <th>Team</th>
        <th><abbr title="Played">Pld</abbr></th>
        <th><abbr title="Won">W</abbr></th>
        <th><abbr title="Drawn">D</abbr></th>
        <th><abbr title="Lost">L</abbr></th>
        <th><abbr title="Goals for">GF</abbr></th>
        <th><abbr title="Goals against">GA</abbr></th>
        <th><abbr title="Goal difference">GD</abbr></th>
        <th><abbr title="Points">Pts</abbr></th>
        <th>Qualification or relegation</th>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <th>1</th>
        <td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
        </td>
        <td>38</td>
        <td>23</td>
        <td>12</td>
        <td>3</td>
        <td>68</td>
        <td>36</td>
        <td>+32</td>
        <td>81</td>
        <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
    </tr>
    <tr>
        <th>2</th>
        <td><a href="https://en.wikipedia.org/wiki/Arsenal_F.C." title="Arsenal F.C.">Arsenal</a></td>
        <td>38</td>
        <td>20</td>
        <td>11</td>
        <td>7</td>
        <td>65</td>
        <td>36</td>
        <td>+29</td>
        <td>71</td>
        <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
    </tr>
    <tr>
        <th>3</th>
        <td><a href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C." title="Tottenham Hotspur F.C.">Tottenham Hotspur</a></td>
        <td>38</td>
        <td>19</td>
        <td>13</td>
        <td>6</td>
        <td>69</td>
        <td>35</td>
        <td>+34</td>
        <td>70</td>
        <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
    </tr>
    <tr class="is-selected">
        <th>4</th>
        <td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
        <td>38</td>
        <td>19</td>
        <td>9</td>
        <td>10</td>
        <td>71</td>
        <td>41</td>
        <td>+30</td>
        <td>66</td>
        <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round" title="2016–17 UEFA Champions League">Champions League play-off round</a></td>
    </tr>
    <tr>
        <th>5</th>
        <td><a href="https://en.wikipedia.org/wiki/Manchester_United_F.C." title="Manchester United F.C.">Manchester United</a></td>
        <td>38</td>
        <td>19</td>
        <td>9</td>
        <td>10</td>
        <td>49</td>
        <td>35</td>
        <td>+14</td>
        <td>66</td>
        <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
    </tr>
    <tr>
        <th>6</th>
        <td><a href="https://en.wikipedia.org/wiki/Southampton_F.C." title="Southampton F.C.">Southampton</a></td>
        <td>38</td>
        <td>18</td>
        <td>9</td>
        <td>11</td>
        <td>59</td>
        <td>41</td>
        <td>+18</td>
        <td>63</td>
        <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
    </tr>
    <tr>
        <th>7</th>
        <td><a href="https://en.wikipedia.org/wiki/West_Ham_United_F.C." title="West Ham United F.C.">West Ham United</a></td>
        <td>38</td>
        <td>16</td>
        <td>14</td>
        <td>8</td>
        <td>65</td>
        <td>51</td>
        <td>+14</td>
        <td>62</td>
        <td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round" title="2016–17 UEFA Europa League">Europa League third qualifying round</a></td>
    </tr>
    <tr>
        <th>8</th>
        <td><a href="https://en.wikipedia.org/wiki/Liverpool_F.C." title="Liverpool F.C.">Liverpool</a></td>
        <td>38</td>
        <td>16</td>
        <td>12</td>
        <td>10</td>
        <td>63</td>
        <td>50</td>
        <td>+13</td>
        <td>60</td>
        <td></td>
    </tr>
    <tr>
        <th>9</th>
        <td><a href="https://en.wikipedia.org/wiki/Stoke_City_F.C." title="Stoke City F.C.">Stoke City</a></td>
        <td>38</td>
        <td>14</td>
        <td>9</td>
        <td>15</td>
        <td>41</td>
        <td>55</td>
        <td>−14</td>
        <td>51</td>
        <td></td>
    </tr>
    <tr>
        <th>10</th>
        <td><a href="https://en.wikipedia.org/wiki/Chelsea_F.C." title="Chelsea F.C.">Chelsea</a></td>
        <td>38</td>
        <td>12</td>
        <td>14</td>
        <td>12</td>
        <td>59</td>
        <td>53</td>
        <td>+6</td>
        <td>50</td>
        <td></td>
    </tr>
    <tr>
        <th>11</th>
        <td><a href="https://en.wikipedia.org/wiki/Everton_F.C." title="Everton F.C.">Everton</a></td>
        <td>38</td>
        <td>11</td>
        <td>14</td>
        <td>13</td>
        <td>59</td>
        <td>55</td>
        <td>+4</td>
        <td>47</td>
        <td></td>
    </tr>
    <tr>
        <th>12</th>
        <td><a href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C." title="Swansea City A.F.C.">Swansea City</a></td>
        <td>38</td>
        <td>12</td>
        <td>11</td>
        <td>15</td>
        <td>42</td>
        <td>52</td>
        <td>−10</td>
        <td>47</td>
        <td></td>
    </tr>
    <tr>
        <th>13</th>
        <td><a href="https://en.wikipedia.org/wiki/Watford_F.C." title="Watford F.C.">Watford</a></td>
        <td>38</td>
        <td>12</td>
        <td>9</td>
        <td>17</td>
        <td>40</td>
        <td>50</td>
        <td>−10</td>
        <td>45</td>
        <td></td>
    </tr>
    <tr>
        <th>14</th>
        <td><a href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C." title="West Bromwich Albion F.C.">West Bromwich Albion</a></td>
        <td>38</td>
        <td>10</td>
        <td>13</td>
        <td>15</td>
        <td>34</td>
        <td>48</td>
        <td>−14</td>
        <td>43</td>
        <td></td>
    </tr>
    <tr>
        <th>15</th>
        <td><a href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C." title="Crystal Palace F.C.">Crystal Palace</a></td>
        <td>38</td>
        <td>11</td>
        <td>9</td>
        <td>18</td>
        <td>39</td>
        <td>51</td>
        <td>−12</td>
        <td>42</td>
        <td></td>
    </tr>
    <tr>
        <th>16</th>
        <td><a href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth" title="A.F.C. Bournemouth">AFC Bournemouth</a></td>
        <td>38</td>
        <td>11</td>
        <td>9</td>
        <td>18</td>
        <td>45</td>
        <td>67</td>
        <td>−22</td>
        <td>42</td>
        <td></td>
    </tr>
    <tr>
        <th>17</th>
        <td><a href="https://en.wikipedia.org/wiki/Sunderland_A.F.C." title="Sunderland A.F.C.">Sunderland</a></td>
        <td>38</td>
        <td>9</td>
        <td>12</td>
        <td>17</td>
        <td>48</td>
        <td>62</td>
        <td>−14</td>
        <td>39</td>
        <td></td>
    </tr>
    <tr>
        <th>18</th>
        <td><a href="https://en.wikipedia.org/wiki/Newcastle_United_F.C." title="Newcastle United F.C.">Newcastle United</a> <strong>(R)</strong>
        </td>
        <td>38</td>
        <td>9</td>
        <td>10</td>
        <td>19</td>
        <td>44</td>
        <td>65</td>
        <td>−21</td>
        <td>37</td>
        <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
    </tr>
    <tr>
        <th>19</th>
        <td><a href="https://en.wikipedia.org/wiki/Norwich_City_F.C." title="Norwich City F.C.">Norwich City</a> <strong>(R)</strong>
        </td>
        <td>38</td>
        <td>9</td>
        <td>7</td>
        <td>22</td>
        <td>39</td>
        <td>67</td>
        <td>−28</td>
        <td>34</td>
        <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>    </tr>
    <tr>
        <th>20</th>
        <td><a href="https://en.wikipedia.org/wiki/Aston_Villa_F.C." title="Aston Villa F.C.">Aston Villa</a> <strong>(R)</strong>
        </td>
        <td>38</td>
        <td>3</td>
        <td>8</td>
        <td>27</td>
        <td>27</td>
        <td>76</td>
        <td>−49</td>
        <td>17</td>
        <td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
    </tr>
    </tbody>
</table>
                    

اصلاح کننده ها #

borders را به همه ستون ها اضافه کنید.

table is-bordered
یک دو
سه چهار

stripes را به جدول اضافه کنید.

table is-striped
یک دو
سه چهار
پنج شش
هفت هشت
نه ده
یازده دوازده

ستون ها را باریک تر کنید.

table is-narrow
یک دو
سه چهار
پنج شش
هفت هشت
نه ده
یازده دوازده

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

table is-hoverable
یک دو
سه چهار
پنج شش
هفت هشت
نه ده
یازده دوازده

می توانید جدول fullwidth داشته باشید.

table is-fullwidth
یک دو
سه چهار
پنج شش
هفت هشت
نه ده
یازده دوازده

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

table is-bordered is-striped is-narrow is-hoverable is-fullwidth
یک دو
سه چهار
پنج شش
هفت هشت
نه ده
یازده دوازده

Table container #

میتوانید با گذاشتن table در یک بخش table-container یک جدول قابل اسکرول ایجاد کنید:


<div class="table-container">
  <table class="table">
  <!-- محتوای جدول -->
  </table>
</div>
                    
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 88 90 92 94 96 98 100 102 104 106 108 110 112 114 116 118 120 122 124 126 128 130 132 134 136 138 140 142 144 146 148 150 152 154 156 158 160 162 164 166 168 170 172 174 176 178 180 182 184 186 188 190 192 194 196 198 200
3 6 9 12 15 18 21 24 27 30 33 36 39 42 45 48 51 54 57 60 63 66 69 72 75 78 81 84 87 90 93 96 99 102 105 108 111 114 117 120 123 126 129 132 135 138 141 144 147 150 153 156 159 162 165 168 171 174 177 180 183 186 189 192 195 198 201 204 207 210 213 216 219 222 225 228 231 234 237 240 243 246 249 252 255 258 261 264 267 270 273 276 279 282 285 288 291 294 297 300
4 8 12 16 20 24 28 32 36 40 44 48 52 56 60 64 68 72 76 80 84 88 92 96 100 104 108 112 116 120 124 128 132 136 140 144 148 152 156 160 164 168 172 176 180 184 188 192 196 200 204 208 212 216 220 224 228 232 236 240 244 248 252 256 260 264 268 272 276 280 284 288 292 296 300 304 308 312 316 320 324 328 332 336 340 344 348 352 356 360 364 368 372 376 380 384 388 392 396 400
5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100 105 110 115 120 125 130 135 140 145 150 155 160 165 170 175 180 185 190 195 200 205 210 215 220 225 230 235 240 245 250 255 260 265 270 275 280 285 290 295 300 305 310 315 320 325 330 335 340 345 350 355 360 365 370 375 380 385 390 395 400 405 410 415 420 425 430 435 440 445 450 455 460 465 470 475 480 485 490 495 500

متغیرها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار ماسبه شده
نام نوع مقدار پیش فرض مقدار ماسبه شده
$table-color color $text-strong hsl(0, 0%, 21%)
$table-background-color color $scheme-main hsl(0, 0%, 100%)
$table-cell-border size 1px solid $border
$table-cell-border-width size 0 0 1px
$table-cell-padding size 0.5em 0.75em
$table-cell-heading-color color $text-strong hsl(0, 0%, 21%)
$table-head-cell-border-width size 0 0 2px
$table-head-cell-color color $text-strong hsl(0, 0%, 21%)
$table-foot-cell-border-width size 2px 0 0
$table-foot-cell-color color $text-strong hsl(0, 0%, 21%)
$table-head-background-color string transparent
$table-body-background-color string transparent
$table-foot-background-color string transparent
$table-row-hover-background-color color $scheme-main-bis hsl(0, 0%, 98%)
$table-row-active-background-color color $primary hsl(171, 100%, 41%)
$table-row-active-color color $primary-invert #fff
$table-striped-row-even-background-color color $scheme-main-bis hsl(0, 0%, 98%)
$table-striped-row-even-hover-background-color color $scheme-main-ter hsl(0, 0%, 96%)
$table-colors function $colors mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)