تگ <table></table> در html - وب سایت PNLdev

نمونه کد

HTML یک نمونه کد ساده از تگ <table>

<table>
    <tr>
      <th>Coffee</th>
      <th>Tea</th>
    </tr>
    <tr>
      <td>Espresso</td>
      <td>masala tea</td>
    </tr>
    <tr>
      <td>Latte</td>
      <td>Saffron tea</td>
    </tr>
</table>

آزمایشگاه

تعریف و کاربرد

برای ساخت یک جدول محتوایی در html از تگ <table> استفاده می کنیم.

تگ table می بایست دارای عناصری مربتط نظیر: تگ <th> - تگ <tr> و تگ <td> باشد.

تگ <tr> ردیف را در جدول محتوایی مشخص می کند.

تگ <th> عنوان جدول محتوایی را مشخص می کند.

تگ <td> سلول هارا در جدول محتوایی مشخص می کند.

تگ <table> ممکن است از تگ هایی همچون:

تگ <tfoot>
تگ <thead>
تگ <colgroup>
تگ <caption>
تگ <tbody>

نیز استفاده کند.

سازگاری با مرورگر

#	کروم	ادج	فایرفاکس	سافاری	اپرا
<table>

ویژگی های سراسری

تگ table از ویژگی های سراسری HTML پشتیبانی می کند.

ویژگی های رویداد

تگ table از ویژگی های رویداد HTML پشتیبانی می کند.

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

نمونه کد

تگ <table> در HTML با استایل اختصاصی- مثال شماره 1

<head>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td>masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>Saffron tea</td>
        </tr>
    </table>
</body>

آزمایشگاه

نمونه کد

تگ <table> در HTML با استایل اختصاصی- مثال شماره 2

<table style="float: right;">
    <tr>
      <th>Coffee</th>
      <th>Tea</th>
    </tr>
    <tr>
      <td>Espresso</td>
      <td>masala tea</td>
    </tr>
    <tr>
      <td>Latte</td>
      <td>Saffron tea</td>
    </tr>
</table>

آزمایشگاه

نمونه کد

تگ <table> در HTML با استایل اختصاصی- مثال شماره 3

<head>
    <style>
        table, th, td {
            border: 1px solid black;
        }
        table.center{
            margin-left: auto;	
            margin-right: auto;
        }
    </style>
</head>
<body>
    <table class="center">
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td>masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>Saffron tea</td>
        </tr>
    </table>
</body>

آزمایشگاه

نمونه کد

تگ <table> در HTML با استایل اختصاصی- مثال شماره 4

<head>
    <style>
      table, th, td {
        border: 1px solid black;
        background-color: #00ff87;
      }
	</style>
</head>
<body>
	<table>
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td>masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>Saffron tea</td>
        </tr>	
    </table>
</body>

آزمایشگاه

نمونه کد

تگ <table> در HTML با استایل اختصاصی- مثال شماره 5

<head>
    <style>
        table, th, td {
        	border: 1px solid black;
        }
        th, td {
        	padding: 10px;
        }
</style>
</head>
<body>
    <table>
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td>masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>Saffron tea</td>
        </tr>
    </table>
</body>

آزمایشگاه

نمونه کد

تگ <table> در HTML با استایل اختصاصی- مثال شماره 6

<body>
    <table style="width: 500PX;">
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td>masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>Saffron tea</td>
	    </tr>
</table>
</body>

آزمایشگاه

نمونه کد

تگ <table> در HTML با استایل اختصاصی- مثال شماره 7

<head>
    <style>
        tbody, th, td{
        	border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>name</th>
            <th>email</th>
            <th>tel</th>
        </tr>
        <tr>
            <td>ali heydari</td>
            <td>aliheydari@gmail.com</td>
            <td>09124552545</td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <th>name</th>
            <td>ali heydari</td>
        </tr>
        <tr>
            <th>email</th>
            <td>aliheydari@gmail.com</td>
        </tr>
        <tr>
            <th>tel</th>
            <td>09124552545</td>
        </tr>
    </table>
</body>

آزمایشگاه

نمونه کد

تگ <table> در HTML با استایل اختصاصی- مثال شماره 8

<table>
    <caption>All kinds of tea and coffee</caption>
    <tr>
        <th>Coffee</th>
        <th>Tea</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>masala tea</td>
    </tr>
    <tr>
        <td>Latte</td>
        <td>Saffron tea</td>
    </tr>
</table>

آزمایشگاه

نمونه کد

تگ <table> در HTML با استایل اختصاصی- مثال شماره 9

<table>
    <tr>
        <th>name</th>
        <th>email</th>
        <th colspan="2">tel</th>
    </tr>
    <tr>
        <td>ali</td>
        <td>aliheydari@gmail.com</td>
        <td>09212545859</td>
        <td>09126660031</td>
    </tr>
</table>
<hr>
<table>
    <tr>
        <th>name</th>
        <td>ali</td>
    </tr>
    <tr>
        <th>email</th>
        <td>aliheydari@gmail.com</td>
    </tr>
    <tr>
        <th rowspan="2">Phone:</th>
        <td>123-45-678</td>
    </tr>
    <tr>
        <td>212-00-546</td>
    </tr>
</table>

آزمایشگاه

استایل css پیش فرض

بیشتر مرورگر ها تگ table را با استایل پیشفرض زیر نمایش می دهند:

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

تگ <table> در HTML <table></table> tag HTML

نمونه کد

تعریف و کاربرد

سازگاری با مرورگر

ویژگی های سراسری

ویژگی های رویداد

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

نمونه کد

نمونه کد

نمونه کد

نمونه کد

نمونه کد

نمونه کد

نمونه کد

نمونه کد

نمونه کد

استایل css پیش فرض

تگ <table> در HTML
<table></table> tag HTML