Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • HTML Tables Tutorial

    Загружено:

    Lesley Broadwood
    108 просмотров5 страниц
    The document discusses HTML tables and how to structure and style them using various HTML and CSS elements. It defines the <table>, <tr>, <td>, and <th> elements to define the table, rows, cells, and headings. It provides examples of how to use CSS properties like border, border-collapse, padding, text-align, and border-spacing to control the appearance and layout of tables. It includes three exercises demonstrating a basic table, a zebra-striped table, and a responsive table with horizontal scrolling.

    Исходное описание:

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    The document discusses HTML tables and how to structure and style them using various HTML and CSS elements. It defines the <table>, <tr>, <td>, and <th> elements to define the table, rows, cells, and headings. It provides examples of how to use CSS properties like border, border-collapse, padding, text-align, and border-spacing to control the appearance and layout of tables. It includes three exercises demonstrating a basic table, a zebra-striped table, and a responsive table with horizontal scrolling.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    108 просмотров5 страниц

    HTML Tables Tutorial

    Загружено:

    Lesley Broadwood
    The document discusses HTML tables and how to structure and style them using various HTML and CSS elements. It defines the <table>, <tr>, <td>, and <th> elements to define the table, rows, cells, and headings. It provides examples of how to use CSS properties like border, border-collapse, padding, text-align, and border-spacing to control the appearance and layout of tables. It includes three exercises demonstrating a basic table, a zebra-striped table, and a responsive table with horizontal scrolling.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 5

    i

    HTML Tables
    An HTML table is defined with the <table> tag. Each table row is defined with the <tr>
    tag. A table header is defined with the <th> tag. By default, table headings are bold and
    centered. A table data/cell is defined with the <td> tag.

    Use the HTML <table> element to define a table


    Use the HTML <tr> element to define a table row
    Use the HTML <td> element to define a table data
    Use the HTML <th> element to define a table heading
    Use the HTML <caption> element to define a table caption
    Use the CSS border property to define a border
    Use the CSS border-collapse property to collapse cell borders
    Use the CSS padding Add padding to cells (space between the cell content
    and its borders)
    Use the CSS text-align Align text in a cell
    Use the CSS border-spacing Sets the spacing between cells
    Use the colspan Make a cell span many columns
    Use the rowspan Make a cell span many rows
    Use the id attribute to uniquely define one table

    Collapsed Border - CSS border-collapse property


    Example
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    }

    Cell Padding - CSS padding property


    Example
    th, td {
    padding: 15px;
    }

    Left-align Headings

    By default, table headings are bold and centered.

    Example
    th {
    text-align: left;
    }

    1
    Adding Border Spacing - CSS border-spacing

    Border spacing specifies the space between the cells.

    Example
    table {
    border-spacing: 5px;
    }

    Exercise 1 – basic table with border Key the following into Notepad++

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table, th, td {
    border: 1px solid black;
    }
    </style>
    </head>
    <body>

    <h2>Basic HTML Table</h2>

    <table style="width:100%">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
    </tr>
    </table>
    </body>
    </html>

    2
    Exercise 2 - Zebra Striped Table

    For zebra-striped tables, use the nth-child() selector and add a background-color to all
    even (or odd) table rows:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    }

    th, td {
    text-align: left;
    padding: 16px;
    }

    tr:nth-child(even) {
    background-color: #f2f2f2
    }
    </style>
    </head>
    <body>

    <h2>Zebra Striped Table</h2>


    <p>For zebra-striped tables, use the nth-child() selector and add a background-color to
    all even (or odd) table rows:</p>

    <table>
    <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    <tr>
    <td>Adam</td>
    <td>Johnson</td>
    <td>67</td>
    3
    </tr>
    </table>

    </body>
    </html>

    Exercise 3 - Responsive Table


    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    table {
    border-collapse: collapse;
    border-spacing: 10;
    width: 100%;
    border: 5px solid #ddd;
    }

    th, td {
    text-align: left;
    padding: 5px;
    }

    tr:nth-child(even){background-color: #f2f2f2}
    </style>
    </head>
    <body>

    <h2>Responsive Table</h2>
    <p>If you have a table that is too wide, you can add a container element with overflow-
    x:auto around the table, and it will display a horizontal scroll bar when needed.</p>
    <p>Resize the browser window to see the effect. Try to remove the div element and see
    what happens to the table.</p>

    <div style="overflow-x:auto;">
    <table>
    <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>50</td>
    4
    <td>50</td>
    <td>50</td>
    <td>50</td>

    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>
    <td>94</td>

    </tr>
    <tr>
    <td>Adam</td>
    <td>Johnson</td>
    <td>67</td>
    <td>67</td>
    <td>67</td>
    <td>67</td>
    <td>67</td>

    </tr>
    </table>
    </div>
    </body>
    </html>

    Figure 1-Responsive Table (exercise 3) sample

    i
    www.w3schools.com

    Вам также может понравиться