آموزش W3CSS

آموزش W3.CSS –  جدول ها

می توان از W3.CSS برای نمایش انواع مختلف جدول ها با استفاده از استایل های مختلفِ w3-table استفاده کرد.

نام کلاس

توضیحات

w3-table

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

w3-striped

جدولی را نمایش میده که سطرهاش یکی در میان رنگی هستن.

w3-bordered

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

w3-border

یک جدول قاب دار می کشه.

w3-card

جدول را بصورت کارت می کشه.

w3-responsive

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

w3-tiny

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

w3-small

یک جدول با فونت های کوچک می کشه.

w3-large

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

w3-xlarge

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

w3-xxlarge

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

w3-xxxlarge

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

w3-jumbo

یک جدول با فونت های بزرگ و درشت (jumbo) می کشه.

مثال

w3css_tables.htm

<html>
   <head>
      <title>The W3.CSS Tables</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body class="w3-container"> 
      <h2>Tables Demo</h2>
	  <hr/>
	  <h3>Simple Table</h3>
      <table class="w3-table">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>
      <h3>Stripped Table with borders</h3>
      <table class="w3-table w3-striped w3-bordered w3-border">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>
      <hr/>
	  <h3>Table as Card</h3>
      <table class="w3-table w3-card-4">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>
      <h3>Responsive table</h3>
      <div class="w3-responsive">
	     <table class="w3-table w3-card-4">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Data #1</th>
			<th>Data #2</th><th>Data #3</th><th>Data #4</th>
			<th>Data #5</th><th>Data #6</th><th>Data #7</th>
			<th>Data #8</th><th>Data #9</th><th>Data #10</th>
			</tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>10</td>
			<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
			<td>16</td><td>17</td><td>19</td><td>20</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>10</td>
			<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
			<td>16</td><td>17</td><td>19</td><td>20</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>10</td>
			<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
			<td>16</td><td>17</td><td>19</td><td>20</td></tr>
         </tbody>
      </table>
      </div>
	  <h3>Table with very small font</h3>
      <table class="w3-table w3-tiny">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>
   </body>
</html>

نتیجه

خروجی کد بالا بصورت زیر خواهد بود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

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

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

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

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

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

لطفا چند لحظه منتظر بمانید ...