HTML Tables

Creating Tables in HTML


In this article, you will learn how to display table data using HTML tables.

Creating Tables in HTML
The HTML table allows you to organize the data by rows and columns. It is generally used in tabular analysis structures. Student lists, product list, income and expense list etc.

Creating html tables is simple and effective. Structures like very advanced datatable are basically the extension of this system.
<table>
    <tr>
        <th>No.</th>
        <th>Adı</th>
        <th>Yaşı</th>
        <th>Sınıfı</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Erkan</td>
        <td>16</td>
        <td>Lise 3</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Selim</td>
        <td>17</td>
        <td>Lise 4</td>
    </tr>
</table>

<!-- You can visually improve the table by adding style codes.-->
table, th, td {
    border: 1px solid #ddd;
}
th, td {
    padding: 15px;
}

table {
    border-collapse: collapse;
}
th {
    text-align: center;
}


<!--If the user has two phones, you need 1 header for this. In such cases, you can use a horizontal colspan.-->
<table>
    <tr>
        <th>Ad</th>
        <th colspan="2">Telefon</th>
    </tr>
    <tr>
        <td>Eda Taşçı</td>
        <td>555 555 55 55 </td>
        <td>333 333 33 33 </td>
    </tr>
</table>


<!--If the user has two phones, you will need 1 header for this. In such cases you can use rowspan in the vertical plane.-->
<table>
    <tr>
        <th>Adı:</th>
        <td>Adem Büyük</td>
    </tr>
    <tr>
        <th rowspan="2">Telefon:</th>
        <td>111 111 11 11</td>
    </tr>
    <tr>
        <td>222 222 22 22</td>
    </tr>
</table>
Span allows you to expand table rows and columns to multiple other rows and columns.

Normally, one table cell cannot pass into the space below or above another table cell. However, you can use rowspan or colspan attributes to span multiple rows or columns in a table.

Rowspan is used for spreading vertically for Colspan for spreading horizontally
Tables should not be used when creating the entire site. It should be used to show data to a certain information area. Otherwise, your site will open slowly and your design processes will be difficult.
E.Albayrak
Email

0 Yorum

Soru & Yorum


Web Tasarım

Renkli Kare

Web Tasarım Ajansı

Social Media