How to make a table in html

Creating tables in HTML is a fundamental skill for displaying structured data on web pages. HTML tables are versatile and can be customized with CSS for enhanced presentation and readability. In this article, we'll explore different methods to create tables in HTML, including CSS styling and using Bootstrap for responsive design.

Responsive Tables with Bootstrap

Using the most basic table markup, here’s how .table-based tables look in MDB.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
        
            
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First</th>
              <th scope="col">Last</th>
              <th scope="col">Handle</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td colspan="2">Larry the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>

Styling Tables with CSS

To enhance the appearance of your tables, you can use CSS for styling.

  • The width: 100%; style makes the table take up the full width of its container.
  • The border-collapse: collapse; style removes the spacing between table borders.
  • The th and td styles add borders and padding to table cells.

Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 
        
            
        <table class="styledTable">
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
          </tr>
          <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
          </tr>
          <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
          </tr>
        </table>
        
        
    
        
            
        <style>
          .styledTable {
            width: 100%;
            border-collapse: collapse;
          }
          .styledTable th, .styledTable td {
            border: 1px solid #ddd;
            padding: 8px;
          }
          .styledTable th {
            text-align: left;
          }
        </style>