recategorized
1,546 views
0 votes
0 votes

Which of the following HTML code will affect the vertical alignment of the table content?

  1. <td style="vertical-align:middle"> Text Here </td>
  2. <td valign="centre"> Text Here </td>
  3. <td style="text-align:center"> Text Here </td>
  4. <td align="middle"> Text Here </td>
recategorized

4 Answers

0 votes
0 votes

Ans should be 1

vertical-align in table cells

When used in table cells, vertical-align does what most people expect it to, which is mimic the (old, deprecated) valign attribute. In a modern, standards-compliant browser, the following three code snippets do the same thing:

<td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>

0 votes
0 votes
 
 
Explanation:
 
 

Attribute

Value

Explanation

align=" "

horizontal alignment in cell

left

aligns to the left(Default)

center

aligns to the center

right

aligns to the right

valign=" "

vertical alignment in cell

top

aligns to the top

middle

aligns to the middle (Default)

bottom

aligns to the bottom

 

baseline

The baseline is the line where most of the characters sit.

 

 

CSS text-align and vertical-align property

 

Attribute

Value

Explanation

Style=”text-align:center;”

horizontal alignment in cell

left

aligns to the left(Default)

center

aligns to the center

right

aligns to the right

Style=”vertical-align:middle;”

vertical alignment in cell

top

aligns to the top

middle

aligns to the middle (Default)

bottom

aligns to the bottom

 

baseline

The baseline is the line where most of the characters sit.

 
Option (A) is correct as vertical-align:middle is the css vertical alignment property
Option (B) is wrong as valign does not have center value
Option (C) is wrong as text-align:center is a horizontal property in CSS
Option (D) is wrong as align does not have middle value
 
Example 
 
<html>
<body>
<table height="300px" width="200px" border="1">
  <tr>
    <td valign="top">Cell A</td>
    <td valign="baseline">Cell B</td>
  </tr>
  <tr>
    <td valign="bottom">Cell C</td>
    <td valign="middle">Cell D</td>
  </tr>
  <tr>
    <td>Cell A</td>
    <td style="vertical-align:baseline">Cell B</td>
  </tr>
  <tr>
    <td style="vertical-align:bottom">Cell C</td>
    <td style="vertical-align:top">Cell D</td>
  </tr>
  <tr>
    <td style="text-align:center">Cell A</td>
    <td style="vertical-align:middle">Cell B</td>
  </tr>
</table>
 
 
 
 
0 votes
0 votes

Correct Answer: Option A
 

  • <td> element is used for Table Cell Data. 
     
  • Here, we are using 'style' (CSS inline styling) as an attribute for <td> element. 
     
  • To specify the vertical alignment of inline box or table-cell content, the vertical-align property is being used here and its value has been set as 'middle'. 

 

Reference: Learning Web Design, 5th edition, Jennifer Niederst Robbins

 

edited by
Answer:

Related questions

1 votes
1 votes
2 answers
2
makhdoom ghaya asked Oct 4, 2016
2,024 views
Which of the following tag in HTML is used to surround information, such as signature of the person who created the page?<body></body><address></address><strong></strong>...
3 votes
3 votes
2 answers
3
go_editor asked Aug 20, 2016
2,025 views
Which of the following statements is not correct?HTML is not screen precise formatting languageHTML does not specify a logicDHTML is used to developing highly interacting...
1 votes
1 votes
2 answers
4
go_editor asked Jul 13, 2016
1,472 views
Match the following with respect to HTML tags and usage$\begin{array}{clcl} \text{a.} & \text{CITE} & \text{i.} & \text{Italic representation} \\ \text{b.} & \text{EM} & ...