How to convert this html table to div?


#1

Hello
How to convert this html table to div?

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:1104px;margin-left:1px;margin-bottom:-6px;">
<tbody><tr>
<td>
<table style="margin-top: 5px; margin-bottom: 5px; border: 1px solid rgb(0, 0, 0);" width="389" align="center" bgcolor="#303030" border="0" cellpadding="0" cellspacing="0" height="168">
<tbody><tr>
<td style="padding: 1px;">
<table style="border: 1px solid rgb(0, 0, 0);" width="100%" bgcolor="#232323" border="0" cellpadding="0" cellspacing="0" height="168">
<tbody><tr>
<td style="padding: 0px;">
<div align="center">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tbody><tr>
<td width="10%" height="20" align="center" style="padding:2px;border:1px solid #000;background:url('/gros-css/menuo.png');">Ваш аватар</td>
<td width="90%" height="20" align="center" style="padding:2px;border:1px solid #000;background:url('/gs/menuo.png');">Информация</td>
</tr>

#2

Start with,

<div>Ваш аватар</div>
<div>Информация</div>

CSS


div {
    display: inline-block;
    width: 10%;
    height: 20px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background: url(/gros-css/menuo.png);
    box-sizing: border-box;
    background-clip: content-box;
}
div+div {
    width: 89%;
    background: url(/gs/menuo.png);
}

The larger container gives an allowance for the 2 pixel gap inserted by display.

Note:

A wrapper would give better parent definition than the body. It would mean a tweak to the above style sheet, but could accommodate floats as well.

<section>
  <div>Ваш аватар</div>
  <div>Информация</div>
</section>

CSS

section {
    width: 100%;
    position: relative;
}

This does not emulate your entire table, just the nested TDs, but it is one section out of the way. Can you give a screenshot of what the table looks like right now? (Give it a width of ~600 - 650 pixels.)


Continuing…

<article>
  <section>
    <div>Ваш аватар</div>
    <div>Информация</div>
  </section>
</article>

CSS

article {
    width: 1104px;
    margin-left: 1px;
    margin-bottom: -6px;
}

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.