возврат

Табличные свойства. Решения заданий

Практикум

Запишите на HTML коды страниц, показанных на рисунках. Результаты записываете в файлы с именами n.htm (n — номер задания).

Решения заданий расположены в каталоге work/unit13/1301/02/.

  1. Решение Посмотреть

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">
      <HEAD>
        <META http-equiv="Content-Type"
              content="text/html; charset=windows-1251">
        <TITLE>Таблица 01</TITLE>
      <STYLE type="text/css">
    TABLE.tab
    {
      margin: 0 10px 10px 0;
      background:#ffbf00;
    }
    TABLE.tab TD {padding:10px;}
      </STYLE>
      </HEAD>
    
      <BODY bgcolor=white text=black> 
        <H1>Таблица 01</H1>
        <TABLE class=tab bordercolor=white border=1 
               align=left cellspacing=0>
          <TR>
            <TD>1,1</TD>
            <TD>1,2</TD>
            <TD>1,3</TD>
          </TR>
          <TR>
            <TD>2,1</TD>
            <TD>2,2</TD>
            <TD>2,3</TD>
          </TR>
          <TR>
            <TD>3,1</TD>
            <TD>3,2</TD>
            <TD>3,3</TD>
          </TR>
        </TABLE>
        <P>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
      </BODY>
    </HTML>
    
  2. Решение Посмотреть

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">
      <HEAD>
        <META http-equiv="Content-Type"
              content="text/html; charset=windows-1251">
        <TITLE>Таблица 02</TITLE>
        <STYLE type="text/css">
    TABLE.tab
    {
      margin: 0 0 10px 10px;
      background:#ffbf00;
      border: 1px solid black;
      border-collapse:collapse; 
      float:right;
    }
    TABLE.tab TD
    {
      padding:10px;
      border: 1px solid black;
    }
        </STYLE>
      </HEAD>
    
      <BODY bgcolor=white text=black> 
        <H2>Таблица 02</H2>
        <P>                                
          <TABLE class=tab cellspacing=0>
            <TR>
              <TD>1,1</TD>
              <TD>1,2</TD>
              <TD>1,3</TD>
            </TR>
            <TR>
              <TD>2,1</TD>
              <TD>2,2</TD>
              <TD>2,3</TD>
            </TR>
            <TR>
              <TD>3,1</TD>
              <TD>3,2</TD>
              <TD>3,3</TD>
            </TR>
          </TABLE>
        <P>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст.
      </BODY>
    </HTML>
    
  3. Решение Посмотреть

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">
      <HEAD>
        <META http-equiv="Content-Type"
              content="text/html; charset=windows-1251">
        <TITLE>Таблица 03</TITLE>
      </HEAD>
    
      <BODY bgcolor=white text=black> 
        <H2>Таблица 03</H2>
        <P>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
        </P>
        <TABLE bgcolor="#ffbf00" border=1 bordercolor=gray
               align=center cellpadding=10 cellspacing=0>
          <TR>
            <TD>1,1</TD>
            <TD>1,2</TD>
            <TD>1,3</TD>
          </TR>
          <TR>
            <TD>2,1</TD>
            <TD>2,2</TD>
            <TD>2,3</TD>
          </TR>
          <TR>
            <TD>3,1</TD>
            <TD>3,2</TD>
            <TD>3,3</TD>
          </TR>
        </TABLE>
        <P>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
      </BODY>
    </HTML>
    
  4. Решение Посмотреть

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">
      <HEAD>
        <META http-equiv="Content-Type"
              content="text/html; charset=windows-1251">
        <TITLE>Таблица 04</TITLE>
      <STYLE type="text/css">
    TABLE.tab
    {
      margin: 1em 0 1em auto;
      background:#ffbf00;
    }
    TABLE.tab TD {padding:10px;}
      </STYLE>
      </HEAD>
    
      <BODY bgcolor=white text=black> 
        <H2>Таблица 04</H2>
        <P>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
        </P>
        <TABLE class=tab border=1 cellspacing=0>
          <TR>
            <TD>1,1</TD>
            <TD>1,2</TD>
            <TD>1,3</TD>
          </TR>
          <TR>
            <TD>2,1</TD>
            <TD>2,2</TD>
            <TD>2,3</TD>
          </TR>
          <TR>
            <TD>3,1</TD>
            <TD>3,2</TD>
            <TD>3,3</TD>
          </TR>
        </TABLE>
        <P>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
      </BODY>
    </HTML>
    
  5. Решение Посмотреть

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">
      <HEAD>
        <META http-equiv="Content-Type"
              content="text/html; charset=windows-1251">
        <TITLE>Таблица 05</TITLE>
      </HEAD>
    
      <BODY bgcolor=white text=black> 
        <H2>Таблица 05</H2>
        <P>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
        </P>
        <TABLE bgcolor="#ffbf00" border=1
               cellpadding=10 cellspacing=0>
          <TR>
            <TD>1,1</TD>
            <TD>1,2</TD>
            <TD>1,3</TD>
          </TR>
          <TR>
            <TD>2,1</TD>
            <TD>2,2</TD>
            <TD>2,3</TD>
          </TR>
          <TR>
            <TD>3,1</TD>
            <TD>3,2</TD>
            <TD>3,3</TD>
          </TR>
        </TABLE>
        <P>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
     </BODY>
    </HTML>
    
  6. Решение Посмотреть

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">
      <HEAD>
        <META http-equiv="Content-Type"
              content="text/html; charset=windows-1251">
        <TITLE>Таблица 06</TITLE>
        <STYLE type="text/css">
    BODY, HTML {height:100%}
    BODY 
    {
      margin:0;
      padding:0;
    }
    TABLE.tab
    {
      background:#ffbf00;
      border: 1px solid black;
      border-collapse:collapse; 
      width:100%;
      height:100%;
    }
    TABLE.tab TD
    {
      padding:10px;
      border: 1px solid black;
      text-align:center;
      vertical-align:middle;
    }
        </STYLE>
      </HEAD>
      <BODY bgcolor=white text=black> 
        <TABLE class=tab cellspacing=0>
          <TR>
            <TD>1,1</TD>
            <TD>1,2</TD>
          </TR>
          <TR>
            <TD>2,1</TD>
            <TD>2,2</TD>
          </TR>
        </TABLE>
      </BODY>
    </HTML>
    
  7. Решение Посмотреть

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">
      <HEAD>
        <META http-equiv="Content-Type"
              content="text/html; charset=windows-1251">
        <TITLE>Таблица 07</TITLE>
      <STYLE type="text/css">
    BODY, HTML {height:100%}
    BODY 
    {
      margin:0;
      padding:0;
    }
    TABLE.tab
    {
      background:#ffbf00;
      border: 1px solid black;
      border-collapse:collapse; 
      width:100%;
      height:100%;
    }
    TABLE.tab TD
    {
      padding:10px;
      border: 1px solid black;
      text-align:left;
      vertical-align:top;
    }
    TABLE.tab TD.col13
    {
      width:100px;
      background:yellow;
    }
    TABLE.tab TD.col2
    {
      text-align:center;
    }
      </STYLE>
      </HEAD>
    
      <BODY bgcolor=white text=black> 
        <TABLE class=tab cellspacing=0>
          <TR>
            <TD class=col13>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
            </TD>
            <TD class=col2>
              <P>
    Текст начинается сверху, выравнивание по центру 
    ячейки.
              <P>
    Таблица занимает всё пространство окна браузера. 
            </TD>
            <TD class=col13>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
            </TD>
          </TR>
        </TABLE>
      </BODY>
    </HTML>
    
  8. Решение Посмотреть

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">
      <HEAD>
        <META http-equiv="Content-Type"
              content="text/html; charset=windows-1251">
        <TITLE>Таблица 07</TITLE>
      <STYLE type="text/css">
    BODY, HTML {height:100%}
    BODY 
    {
      margin:0;
      padding:0;
    }
    TABLE.tab
    {
      background:#ffbf00;
      border: 1px solid black;
      border-collapse:collapse; 
      width:100%;
      height:100%;
    }
    TABLE.tab TD
    {
      padding:10px;
      border: 1px solid black;
      text-align:left;
      vertical-align:top;
    }
    TABLE.tab TD.col13
    {
      width:100px;
      background:yellow;
    }
    TABLE.tab TD.col2
    {
      text-align:center;
    }
      </STYLE>
      </HEAD>
    
      <BODY bgcolor=white text=black> 
        <TABLE class=tab cellspacing=0>
          <TR>
            <TD class=col13>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
            </TD>
            <TD class=col2>
              <P>
    Текст начинается сверху, выравнивание по центру 
    ячейки.
              <P>
    Таблица занимает всё пространство окна браузера. 
            </TD>
            <TD class=col13>
    Текст. Текст. Текст. Текст. Текст. Текст. Текст. 
            </TD>
          </TR>
        </TABLE>
      </BODY>
    </HTML>
    
  9. Решение Посмотреть

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">
      <HEAD>
        <META http-equiv="Content-Type"
              content="text/html; charset=windows-1251">
        <TITLE>Таблица 09</TITLE>
      </HEAD>
    
      <BODY bgcolor=white text=black> 
        <H2>Таблица 09</H2>
        <TABLE bgcolor="#ffffcc" 
               border=1 bordercolor="#4d4d4d"
               cellpadding=10 cellspacing=0>
          <CAPTION>Заголовок таблицы</CAPTION>
          <TR bgcolor="#ffbf00">
            <TH colspan=7>
              Таблицы должны быть красивыми
            </TH>
          </TR>
          <TR>
            <TD>&nbsp;</TD>
            <TD bgcolor="#4db3d9" 
                width=50 height=50>&nbsp;</TD>
            <TD>&nbsp;</TD>
            <TD bgcolor="#4db3d9" width=50>&nbsp;</TD>
            <TD>&nbsp;</TD>
            <TD bgcolor="#4db3d9" width=50>&nbsp;</TD>
            <TD>&nbsp;</TD>
          </TR>
          <TR>
            <TD bgcolor="#4db3d9"
                width=50 height=50>&nbsp;</TD>
            <TD>&nbsp;</TD>
            <TD bgcolor="#4db3d9" width=50>&nbsp;</TD>
            <TD>&nbsp;</TD>
            <TD bgcolor="#4db3d9" width=50>&nbsp;</TD>
            <TD>&nbsp;</TD>
            <TD bgcolor="#4db3d9" width=50>&nbsp;</TD>
          </TR>
        </TABLE>
        <P>
    Если таблица некрасивая, не верь глазам своим.
      </BODY>
    </HTML>
    
  10. Решение Посмотреть

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">
      <HEAD>
        <META http-equiv="Content-Type"
              content="text/html; charset=windows-1251">
        <TITLE>Таблица 10</TITLE>
        <STYLE type="text/css">
    BODY, HTML {height:100%}
    BODY 
    {
      margin:0;
      padding:0;
    }
    TABLE.tab0
    {
      width:100%;
      height:100%;
      border:none;
    }
    TABLE.tab
    {
      margin: 0 auto;
      background:#ffbf00;
      border: 1px solid black;
      border-collapse:collapse; 
    }
    TABLE.tab TD
    {
      padding:10px;
      border: 1px solid black;
      text-align:center;
      vertical-align:middle;
    }
        </STYLE>
      </HEAD>
    
      <BODY bgcolor=white text=black> 
        <TABLE class=tab0 cellspacing=0>
          <TR>
            <TD>
              <TABLE class=tab cellspacing=0>
                <TR>
                  <TD>1,1</TD>
                  <TD>1,2</TD>
                  <TD>1,3</TD>
                </TR>
                <TR>
                  <TD>2,1</TD>
                  <TD>2,2</TD>
                  <TD>2,3</TD>
                </TR>
                <TR>
                  <TD>3,1</TD>
                  <TD>3,2</TD>
                  <TD>3,3</TD>
                 </TR>
              </TABLE>
            </TD>
          </TR>
        </TABLE>
     </BODY>
    </HTML>
    
вверх | возврат