Prev Next

Table Sizes

You can control the size of your tables and their cells to ensure they fit well into the page layout. Tables can be sized using HTML attributes or CSS. Responsive techniques help tables adjust to different screen sizes.

Key Topics

Setting Width and Height

Example: Using the width and height attributes (though CSS is preferred nowadays).

<table width="300" height="200">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

CSS Sizing Techniques

Example: Applying CSS with fixed or relative units to control table width. Setting width:100%; makes the table adapt to the parent container width.

<style>
table {
    width: 100%;
}

Sizing Table Example

This example shows a table styled entirely with CSS for flexible sizing. A full code example is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sized Table</title>
    <style>
        table {
            width: 80%;
            margin: 0 auto;
            border-collapse: collapse;
        }
        td {
            border: 1px solid #000;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Responsive Table Size</h1>
    <table>
        <tr>
            <td>Name</td>
            <td>Age</td>
        </tr>
        <tr>
            <td>Alice</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>

Explanation: By using percentages for the table width and some basic styling, the table becomes more flexible and adapts to different screen sizes or container widths.

Key Takeaways

  • Use CSS for flexible and maintainable table sizing.
  • Percentages make tables responsive, adjusting to container width.
  • Fixed widths can ensure consistent layouts but may not be responsive.
  • Apply padding for comfortable spacing and improved readability.
  • Experiment with sizing properties to find the right fit for your design.
Prev Next