1. Table Width and Height:
You can set the overall width and height of a table using the width and height attributes in the <table> tag.
<table width="80%" height="200">
<!-- table content goes here -->
</table>2. Column Width:
Adjust the width of individual columns using the width attribute in the <th> (table header) or <td> (table data) tags.
<tr>
<th width="30%">Header 1</th>
<th width="70%">Header 2</th>
</tr>3. CSS Styling:
Use CSS for more control over the size and appearance of tables. Here's an example of using CSS to set the width and other styles:
<style>
table {
width: 80%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
<table>
<!-- table content goes here -->
</table>4. Responsive Tables:
For responsive design, consider using relative units like percentages or viewport units. This allows the table to adapt to different screen sizes.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
<table>
<!-- table content goes here -->
</table>Remember that the above examples are just basic demonstrations. Adjust the values according to your specific layout requirements. Additionally, you may want to consider using frameworks like Bootstrap, which provide responsive and pre-styled components, including tables.