UNIQUE INSTITUTE OF COMPUTER TECHNOLOGY

Day 17: HTML टैबल्स को स्टाइल देना

Day 17: HTML टैबल्स को स्टाइल देना

असाइनमेंट:

  1. एक HTML पेज बनाएं जिसमें स्टाइल की गई टेबल हो।
    • CSS का उपयोग करके टेबल को सुंदर बनाएं।
      उदाहरण:

<!DOCTYPE html>

<html>

<head>

    <title>स्टाइल टेबल</title>

    <style>

        table {

            border-collapse: collapse;

            width: 100%;

        }

        th, td {

            border: 1px solid black;

            padding: 8px;

            text-align: left;

        }

        th {

            background-color: #f2f2f2;

        }

    </style>

</head>

<body>

    <h2>स्टाइल्ड टेबल</h2>

    <table>

        <tr>

            <th>क्रम</th>

            <th>नाम</th>

            <th>उम्र</th>

        </tr>

        <tr>

            <td>1</td>

            <td>राहुल</td>

            <td>25</td>

        </tr>

        <tr>

            <td>2</td>

            <td>सपना</td>

            <td>22</td>

        </tr>

    </table>

</body>

</html>

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the comparison bar
Compare