How to create a table in HTML with different column widths and row heights?

P

Pavel Kravchuk2015-02-11 18:54:40

HTML

Pavel Kravchuk, 2015-02-11 18:54:40

I'm just a beginner in this business, I'm studying tables. And now I ran into a problem... I need a table of approximately this layout ↓

when I first set the width of the first row <.tr><.td width="400">"" *everything is fine here
and below if I change the width parameter <.tr ><.td width="200"> then I get a cell of the same width (points on purpose :) otherwise it doesn’t show in the preview)
maybe I’m not using these parameters correctly, I can’t solve this problem. How then to me to make the table of similar type? ↑
I also used the colspan property, it also does not work with it

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

V

Vadim Belkin, 2015-02-11
@BelkinVadim

The main thing is to correctly divide into cells and merge, then you can not set the size of the cells - they will be distributed from the total width of the table. The method of splitting the entire table into a grid (in your case, 6 or 12 columns) is suitable, similar to any CSS framework, but instead of the classes responsible for the width, use the colspan attribute, and use the rowspan attribute for the height. Example

A

antimind, 2015-02-12
@antimind

Here is an interactive course . And the rest of the topics do not be too lazy to look. In my opinion it is very good for beginners.

J

jlekapb, 2015-02-11
@jlekapb

It is interesting to know why such a table is needed.
Most likely, it will be more convenient to break it into separate blocks than to create and maintain such a table.

P

Pavel Kravchuk, 2015-02-11
@pavlo72856

Here is a small example, I set the top column to one width, the bottom another, but in the end they are the same

<body>
 <table border="2" width="600" align="center" cellpadding="20" background="1.jpg">
  <tr>
     <td width="400"></td>
      <td></td>
     
     
     </tr>
    
     <tr>
        <td width="200"></td>
        <td></td>
     </tr>
  
     </table>
     
     
 </body>