Table using html and css

Redxcyber
1 minute read

Table using html and css

Import this image in your project

Code 👇🏻



<!DOCTYPE html>
<head><html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML</title>
  <style>
    table { width:100%; }
    th,td { border-style:ridge; background-color: lightsteelblue; border-color: firebrick; text-align:center;}
    body { background-image:url('images.jpeg'); 
    background-repeat: no-repeat;
    background-size:cover;
    min-width:100vw;
    min-height:100vh }
    h2 { text-align: center; color: darkgoldenrod; }
    h4 { color:white; font-family: courier; }
  </style>
</head>
<body>
  <h2> hello coders...❤️ </h2>
  <h4> this is my first code in this program i had shown , how can i create a table using html and brautify it using css </h4>
  <table style="width:100%" >
    <tr>
      <th>S.N</th>
      <th>Name</th>
      <th>Age</th>
      <th>Class</th>
    </tr>
    <tr>
      <td style="width:2%">1</td>
      <td>ram</td>
      <td>16</td>
      <td>12th</td>
    </tr>
    <tr>
      <td>2</td>
      <td>pranav</td>
      <td>15</td>
      <td>11th</td>
    </tr>
    <tr>
      <td>3</td>
      <td>shukla</td>
      <td>14</td>
      <td>10th</td>
    </tr>
    <tr>
      <td>4</td>
      <td>ramesh</td>
      <td>8</td>
      <td>6th</td>
    </tr>
    <tr>
      <td>4</td>
      <td>ayush</td>
      <td>7</td>
      <td>4rth</td>
    </tr>
    <tr>
      <td>5</td>
      <td>arun</td>
      <td>4</td>
      <td>1st</td>
    </tr>
  </table>
</body>
</html>


Output 👇🏻