Member Avatar for RochelleJoshua

Will someone please explain to me how do you set up a basic table with 2 columns and be able to resize them in html.

  • 3 Contributors
  • 2 Replies
  • 54 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Member #114696

Dani AI

Generated

and @GreenDay2001 showed the two common ways people used to size columns with HTML attributes. Today, the reliable approach is to set column widths with CSS, ideally via a colgroup. This keeps your markup clean and makes the columns respond correctly as the page resizes.

Example with two columns you can control in percent or pixels:

<table class="two-col">
  <colgroup>
    <col class="left">
    <col class="right">
  </colgroup>
  <tr><td>Left cell</td><td>Right cell</td></tr>
</table>
.two-col { width: 100%; border-collapse: collapse; table-layout: fixed; }
.two-col td { padding: 8px; overflow-wrap: anywhere; }
.two-col col.left  { width: 30%; }   /* or 200px */
.two-col col.right { width: 70%; }   /* or auto */

Notes:

  • table-layout: fixed makes the browser honor your column widths instead of letting long content blow them out. See MDN: table-layout.
  • Setting widths on <col> inside a <colgroup> applies to the entire column, not just one cell. See MDN: colgroup and MDN: col.
  • Use CSS for spacing instead of cellpadding/cellspacing (handled by padding and border-collapse).

If by "resize" you meant letting users drag to resize columns at runtime: HTML/CSS alone does not provide that for table columns. You need JavaScript to track mouse drag and update the corresponding <col> widths dynamically. The CSS resize property only lets users resize certain elements themselves (like a div or textarea with overflow), not table columns across rows MDN: resize.

Also, keep tables for tabular data. For page layout, use CSS Grid/Flex instead.

Recommended Answers

All 2 Replies

Member Avatar for katarey

Hi there

Please clarify the question; actually, it’s not clear

"be able to resize them in html"

Well you can create flexible table like this

<table width="100%" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td width="30%">&nbsp;</td>
    <td width="70%">&nbsp;</td>
  </tr>
</table>

best regards,
Rahul

Member Avatar for Member #114696

and if you want absolute size, use could directly define the dimension in pixels insted of percentage

<table width="100" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td width="30">&nbsp;</td>
    <td width="70">&nbsp;</td>
  </tr>
</table>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.