Membuat Tabel di HTML

Creating Tables in HTML

HTML is widely used for structuring web data by providing a set of rules for document formatting and layout. One of its key features is the ability to create and format organized data called tables[5,7]. Here's how you can create tables using different structures and layout options in HTML.

HTML Table Structure

To create a simple HTML table with one row and two columns, you can use the following code snippet:

<table>
    <tr>
        <td>Header text</td>
        <td>Header text</td>
    </tr>
    <!-- More rows here -->
</table>

In this example, <table> defines the start of the table element, while <tr> creates a new row within the table. Each cell in a row is defined by the <td> tag, which stands for "Table Data". In our case, we have two cells containing header texts.

You can also customize the appearance of your table header text by adding HTML attributes such as style="font-family: Arial" to your <table>, <th>, or <caption> tags.

Table Layout in HTML

The default layout for HTML tables is fixed width, which means the width of each column remains constant regardless of the browser window size. However, you can adjust the layout of your table to better fit various screen sizes by using the width attribute on the <table> tag. For instance, setting style="width: 98%" will ensure that your table fills up most of the available space.

Another useful feature is the collapsible table layout. By combining HTML, CSS, and JavaScript, you can engineer tables that toggle between multiple states, allowing users to view additional information when needed.

Table Design in HTML

Designing an attractive and effective table requires careful consideration of factors such as font choices, colors, contrast, and alignment. While HTML itself does not offer extensive styling capabilities, you can still enhance your table's visual appeal through CSS. Some popular approaches to designing good-looking tables include:

• Using borders and backgrounds: Applying borders around table cells can help define their edges, making them stand out from other elements on the page. Adding background color to cells allows you to highlight specific pieces of information.
• Managing spacing and padding: Adjusting the spacing and padding between cells can improve the overall organization and legibility of your table.

Here's an example of an enhanced table design using CSS:

table {
   border: 1px solid black;
   margin: auto;
}

th {
   text-align: left;
   padding: 8px;
   background-color: #f2f2f2;
}

td {
   text-align: right;
   padding: 8px;
   border: 1px solid black;
}

In this example, we apply a border to the entire table using the border property. We also set the margins to center the table vertically and horizontally using the margin: auto; rule. The th selector targets the table header cells, aligning them to the left, applying padding, and setting a background color. Similarly, the td selector styles the regular table cells by aligning them to the right, applying padding, and defining borders.

By incorporating these techniques into your HTML table designs, you can create visually appealing and user-friendly tables that effectively convey complex data to your audience.