in Web Technologies recategorized
733 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>
in Web Technologies recategorized
733 views

2 Comments

2 and 4 are wrong.. wht abt others
0
0
yes 2 should not be correct as valign ="centre" is not allowed
0
0

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
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

Quick search syntax
tags tag:apple
author user:martin
title title:apple
content content:apple
exclude -tag:apple
force match +apple
views views:100
score score:10
answers answers:2
is accepted isaccepted:true
is closed isclosed:true