Introduction to <data>tag

/* General Styles for the body and container */
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font style */
        background-color: #f0f0f5; /* Light gray background color */
        color: #333; /* Text color */
        margin: 0;
        padding: 20px; /* Padding around the body */
    }
    
    .container {
        max-width: 800px; /* Max width for the container */
        margin: 0 auto; /* Center the container */
        background-color: #fff; /* White background for the container */
        padding: 20px; /* Padding inside the container */
        border-radius: 8px; /* Rounded corners for the container */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
    }
    
    h1 {
        text-align: center; /* Center the heading text */
        margin-bottom: 20px; /* Space below the heading */
        color: #0073e6; /* Blue color for the heading */
    }
    
    /* Table Styles */
    table {
        width: 100%; /* Full width table */
        border-collapse: collapse; /* Remove space between table borders */
        margin-bottom: 20px; /* Space below the table */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Box shadow for table */
        background-color: #fafafa; /* Light background for the table */
        border-radius: 8px; /* Rounded corners for the table */
        overflow: hidden; /* Prevent overflow on rounded corners */
    }
    
    th, td {
        padding: 12px 15px; /* Padding for table cells */
        text-align: left; /* Align text to the left */
        border-bottom: 1px solid #ddd; /* Bottom border for rows */
    }
    
    /* Header Styles */
    thead th {
        background-color: #333; /* Dark background for headers */
        color: #fff; /* White text for headers */
        text-transform: uppercase; /* Uppercase text for headers */
        letter-spacing: 0.05em; /* Spacing between letters for headers */
    }
    
    /* Data Tag Styling */
    td data {
        font-weight: bold; /* Bold text for data tag */
        color: #0073e6; /* Blue color for machine-readable data */
    }
    
    /* Alternate Row Background for Table Body */
    tbody tr:nth-child(even) {
        background-color: #f2f2f2; /* Light gray background for even rows */
    }
    
    /* Hover Effect for Table Rows */
    tbody tr:hover {
        background-color: #e0e0e0; /* Slightly darker background on hover */
        cursor: pointer; /* Pointer cursor on hover */
    }