How to Use HTML Table Tag

Hello friend! Today we learn together how to use <table> tag in HTML to make simple table with table tags and attributes for your web page and also video tutorials in Khmer.

1. Basic Table Tags

When you want to create table, you need 4 main tags. Check out the MDN Table Element Documentation. For non-tabular lists, see Different Lists in HTML (UL vs OL vs DL):

• <table> : Main box to wrap all table content inside.
• <tr> : Table Row. Define one row from left to right.
• <th> : Table Header cell (text is bold and centered by default).
• <td> : Table Data cell for normal content.

Simple Code Example

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td>Dara</td>
    <td>20</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>Sophea</td>
    <td>22</td>
    <td>CSS</td>
  </tr>
</table>

Rendered Output Preview:

Video Tutorial: Create Student Schedule (Khmer)

Watch this video to see how to build student timetable step by step:

2. Table Attributes

HTML table have attributes to change design and merge cells together:

• border: Specifies the width of the border around the table
• cellpadding: Specifies the space between the cell wall and the cell content
• cellspacing: Specifies the space between the cells
• width: Specifies the width of the table
• height: Specifies the height of the table
• align: Specifies the alignment of the table (left, center, right)
• bgcolor: Specifies the background color of the table
• rowspan: Specifies the number of rows a cell should span
• colspan: Specifies the number of columns a cell should span

Example for Colspan & Rowspan

<table border="1" cellpadding="8">
  <tr>
    <th colspan="2">Student Info</th>
  </tr>
  <tr>
    <td>Name: Dara</td>
    <td>Class: Web Dev</td>
  </tr>
</table>

Rendered Output Preview:

Video Tutorial: Table Attributes (Khmer)

Watch this video to learn more about table attributes in detail:

Bonus Tip: Clean CSS & Responsive Table

Here are 2 secret tricks to make your HTML table look modern and responsive on all devices:

1. Fix Double Border Lines with CSS

By default, HTML tables show double border lines between cells. Use border-collapse: collapse in CSS to make single clean border lines:

table {
  border-collapse: collapse; /* remove double border lines */
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
}
th {
  background-color: #f2f2f2;
}

Rendered Output Preview:

2. Make Table Scrollable on Mobile Phones

On small mobile screens, wide tables can break page layout. Wrap your table inside <div style="overflow-x: auto;"> to allow horizontal scrolling.

💡 Next Lesson: Improve typography on your web pages with How to Add Multiple Google Fonts in HTML & CSS!

Happy coding! If you have any questions, try practicing the code in your editor!

<div style="overflow-x: auto;">
  <table border="1">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </table>
</div>

Rendered Output Preview:

Happy coding! If you have any questions, try practicing the code in your editor!